在 img onmouseover 函数中使用 this 和 document.getElementById
Using this and document.getElementById within an img onmouseover function
我正在尝试使用 onmouseover
和 onmouseout
更改 h2 中的图像和文本,就像这个 gif
我在下面给出了一些示例,其中我可以使用 this
或 document.getElementById
更改 onmouseover
和 onmouseout
的图像,但是当我使用 this
我不知道如何同时更改 h2 标签内的文本(如 document.getElementById
下的示例)。使用以下代码段不会更改图像。
onmouseover='(function(){
this.src="https://i.imgur.com/dsF2mgL.jpg"
document.getElementById("message").innerHTML="I am so very tired"
})()'
我正在寻找一种使用 this
并更改 h2
中的图像和文本的方法
使用document.getElementById
<h2>ICE 14: Drake the Duck</h2>
<img
id="duck"
src="https://i.imgur.com/G8TcUqA.jpg"
onmouseover='(function(){
//this.src="./duck2.jpg"
document.getElementById("duck").src="https://i.imgur.com/dsF2mgL.jpg"
document.getElementById("message").innerHTML="I am so very tired"
})()'
onmouseout='(function(){
document.getElementById("duck").src="https://i.imgur.com/PKi5s3p.jpg"
document.getElementById("message").innerHTML="Now I am wide awake!"
})()'
>
<h2 id="message">I am Drake the Duck.</h2>
使用this
<h2>ICE 14: Drake the Duck</h2>
<img
id="duck"
src="https://i.imgur.com/G8TcUqA.jpg"
onmouseover='this.src="https://i.imgur.com/dsF2mgL.jpg"'
onmouseout='this.src="https://i.imgur.com/PKi5s3p.jpg"'
>
<h2 id="message">I am Drake the Duck.</h2>
不要在 onclick
属性中使用 IIFE,因为 this
不会被函数继承(除非你使用箭头函数)。您可以直接将代码放在 onclick
属性中而无需函数包装器。
<h2>ICE 14: Drake the Duck</h2>
<img id="duck" src="https://i.imgur.com/G8TcUqA.jpg"
onmouseover='this.src="https://i.imgur.com/dsF2mgL.jpg"; document.getElementById("message").innerHTML="I am so very tired"'
onmouseout='this.src="https://i.imgur.com/PKi5s3p.jpg"; document.getElementById("message").innerHTML="Now I am wide awake!"'>
<h2 id="message">I am Drake the Duck.</h2>
this 关键字本身不会让你走得太远,因为它只是对导致事件的元素的引用,即你的案例中的 <img>
元素。
但是,如果 <h2>
元素始终是 <img>
之后的下一个兄弟元素,您可以查询图像的 .nextElementSibling 属性 以获取对 <h2>
的引用并分配文本。
这是一个例子:
<h2>ICE 14: Drake the Duck</h2>
<img id="duck" src="https://i.imgur.com/G8TcUqA.jpg" onmouseover='this.src="https://i.imgur.com/dsF2mgL.jpg";this.nextElementSibling.innerHTML="Now I am wide awake!"' onmouseout='this.src="https://i.imgur.com/PKi5s3p.jpg";this.nextElementSibling.innerHTML="I am so very tired!"'>
<h2 id="message">I am Drake the Duck.</h2>
使用 nextElementSibling
选择器来实现它
<h2>ICE 14: Drake the Duck</h2>
<img id="duck" src="https://i.imgur.com/G8TcUqA.jpg" onmouseover='this.src="https://i.imgur.com/dsF2mgL.jpg"
nextElementSibling.textContent="I am so very tired"' onmouseout='this.src="https://i.imgur.com/PKi5s3p.jpg"
nextElementSibling.textContent="Now I am wide awake!"'>
<h2 id="message">I am Drake the Duck.</h2>
我正在尝试使用 onmouseover
和 onmouseout
更改 h2 中的图像和文本,就像这个 gif
我在下面给出了一些示例,其中我可以使用 this
或 document.getElementById
更改 onmouseover
和 onmouseout
的图像,但是当我使用 this
我不知道如何同时更改 h2 标签内的文本(如 document.getElementById
下的示例)。使用以下代码段不会更改图像。
onmouseover='(function(){
this.src="https://i.imgur.com/dsF2mgL.jpg"
document.getElementById("message").innerHTML="I am so very tired"
})()'
我正在寻找一种使用 this
并更改 h2
使用document.getElementById
<h2>ICE 14: Drake the Duck</h2>
<img
id="duck"
src="https://i.imgur.com/G8TcUqA.jpg"
onmouseover='(function(){
//this.src="./duck2.jpg"
document.getElementById("duck").src="https://i.imgur.com/dsF2mgL.jpg"
document.getElementById("message").innerHTML="I am so very tired"
})()'
onmouseout='(function(){
document.getElementById("duck").src="https://i.imgur.com/PKi5s3p.jpg"
document.getElementById("message").innerHTML="Now I am wide awake!"
})()'
>
<h2 id="message">I am Drake the Duck.</h2>
使用this
<h2>ICE 14: Drake the Duck</h2>
<img
id="duck"
src="https://i.imgur.com/G8TcUqA.jpg"
onmouseover='this.src="https://i.imgur.com/dsF2mgL.jpg"'
onmouseout='this.src="https://i.imgur.com/PKi5s3p.jpg"'
>
<h2 id="message">I am Drake the Duck.</h2>
不要在 onclick
属性中使用 IIFE,因为 this
不会被函数继承(除非你使用箭头函数)。您可以直接将代码放在 onclick
属性中而无需函数包装器。
<h2>ICE 14: Drake the Duck</h2>
<img id="duck" src="https://i.imgur.com/G8TcUqA.jpg"
onmouseover='this.src="https://i.imgur.com/dsF2mgL.jpg"; document.getElementById("message").innerHTML="I am so very tired"'
onmouseout='this.src="https://i.imgur.com/PKi5s3p.jpg"; document.getElementById("message").innerHTML="Now I am wide awake!"'>
<h2 id="message">I am Drake the Duck.</h2>
this 关键字本身不会让你走得太远,因为它只是对导致事件的元素的引用,即你的案例中的 <img>
元素。
但是,如果 <h2>
元素始终是 <img>
之后的下一个兄弟元素,您可以查询图像的 .nextElementSibling 属性 以获取对 <h2>
的引用并分配文本。
这是一个例子:
<h2>ICE 14: Drake the Duck</h2>
<img id="duck" src="https://i.imgur.com/G8TcUqA.jpg" onmouseover='this.src="https://i.imgur.com/dsF2mgL.jpg";this.nextElementSibling.innerHTML="Now I am wide awake!"' onmouseout='this.src="https://i.imgur.com/PKi5s3p.jpg";this.nextElementSibling.innerHTML="I am so very tired!"'>
<h2 id="message">I am Drake the Duck.</h2>
使用 nextElementSibling
选择器来实现它
<h2>ICE 14: Drake the Duck</h2>
<img id="duck" src="https://i.imgur.com/G8TcUqA.jpg" onmouseover='this.src="https://i.imgur.com/dsF2mgL.jpg"
nextElementSibling.textContent="I am so very tired"' onmouseout='this.src="https://i.imgur.com/PKi5s3p.jpg"
nextElementSibling.textContent="Now I am wide awake!"'>
<h2 id="message">I am Drake the Duck.</h2>