javascript - onmouseleave -- 将背景图像恢复为默认值

Question

我正在尝试使用 onmouseleave 方法将 div 的背景图像恢复为默认值。这是 HTML 和 JS:

  <script type="text/javascript">

function displayImage(event) {
event = event || window.event;
var targetElement = event.target || event.srcElement;

 if (targetElement.tagName == "IMG") {
    console.log(document.getElementById("viewer"));
    document.getElementById("viewer").style.backgroundImage = 'url(' + targetElement.getAttribute("src") + ')';}
    }

function leaveImage(event){
  event = event || window.event;
  var targetElement = event.target || event.srcElement;

  if (targetElement.tagName != "IMG") {
    document.getElementById("viewer").style.backgroundImage: URL();
  }

}

其中 displayImage 和 leaveImage 是用同一个 HTML div 标签中的方法调用的:

<div class="thumbnails" onmouseover="displayImage(event)">

本质上，我想将“查看器”id 的 div 元素的背景图像返回到其在 mouseleave 上的默认值(创建两个单独的函数)。我的做法是否正确？

谢谢大家!

Answer 1

好的，首先；它显示 [Object HTML Collection] 因为您正在调用 getElementsByTagName，请注意它说的是 Elements，所以您正在获取网站上的每个 p 标签，而您想要的只是获取一个。解决方案可能是给 p 标签一个 ID，然后使用 getElementById，这样你就只会得到单个元素。

其次，您需要将原始 p 标签文本保存在某处，这里是一个将其保存在变量中的示例:

HTML:

<p id="tip">Hover over the image to display larger</p>

Javascript:

var originalText; // Notice this is outside the functions
function displayImage(event) {
    event = event || window.event;  
    var targetElement = event.target || event.srcElement;

    originalText = document.getElementById("tip").innerHTML;
    var altText=targetElement.getAttribute("alt");
    document.getElementById("viewer").innerHTML = altText;


     if (targetElement.tagName == "IMG") {
        console.log(document.getElementById("viewer"));
        document.getElementById("viewer").style.backgroundImage = 'url(' + targetElement.getAttribute("src") + ')';
    }
}

function leaveImage(event){
    event = event || window.event;
    var targetElement = event.target || event.srcElement;

    document.getElementById("viewer").innerHTML = originalText; 

    if (targetElement.tagName != "IMG") {
        document.getElementById("viewer").style.backgroundImage= URL();
      }
 }