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();
  }

}       

其中使用相同HTML div标签中的方法调用displayImage和leaveImage：

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

本质上，我想将“viewer”id'd div元素的背景图像返回到mouseleave的默认值（创建两个单独的函数）。我是以正确的方式去做的吗？

谢谢大家！

Answer 1

我认为这一行应该有一个“=”而不是“：”：

document.getElementById("viewer").style.backgroundImage = URL();

也许这是唯一的问题......

Answer 2

好吧，首先;它显示[对象HTML集合]，因为你正在调用getElementsByTagName，注意它说元素 s ，所以你得到你网站上的每一个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();
      }
 }