在 img onmouseover 函数中使用 this 和 document.getElementById

Question

我正在尝试使用 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>

Answer 1

不要在 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>

Answer 2

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>

Answer 3

使用 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>

在 img onmouseover 函数中使用 this 和 document.getElementById

Using this and document.getElementById within an img onmouseover function

javascript

html

onmouseover

onmouseout