调试JavaScript和css代码:添加一个事件处理程序

Debugging JavaScript & css code: adding an event handler

本文关键字：一个 程序 事件处理 添加 JavaScript css 代码 调试      更新时间：2023-09-26

你可以在这里看到代码：http://jsfiddle.net/KfwyL/我有一个div，div 内部有一个 h1。我设置了 h1，以便在悬停时它变成绿色。我想这样做，当鼠标悬停在 h1 上时，div 会得到一个框阴影。我的代码不起作用。

.HTML： 

<!DOCTYPE html>
<head> 
<link rel="stylesheet" type="text/css" href="../stylesheets/1.css"> 
<title> Max Pleaner's First Website
</title>
</head>
<body>
  <div class="welcomebox"> 
    <h1 class="welcometext">Welcome to my site.
    </h1> 
    </div>
</body>
<<script src="../Scripts/1.js"> </script>
</html>

.css： 

body {
    background-image:url('../images/sharks.jpg');
    }
.welcomebox {background-color:#1C0245;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
  width: 390px;
  height: 78px;
    margin-left:100px;
    margin-top:28px;
    border-style:solid;
  border-width:medium;
}
h1 {
    display:inline-block;
    margin-left: 12px;
    height: 40px;
    width: 357px;
    background-color: #670715;
    padding: 4px;
    position: relative;
    bottom: 5px;
    -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
}
h1:hover {background-color: green;}

Javascript： 

welcomeboxshadow = document.getElementsByClass("welcometext");
function doit()
{
var topbox = document.getElementsbyClass("welcomebox")
topbox.style.box-shadow = "-webkit-box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);-moz-box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);"
};
welcomeboxshadow.onmouseover.doit;

您要做的第一件事是发现浏览器的开发工具。在Chrome和IE上，按F12，但您可以在菜单中的某个位置找到它。开发工具控制台会报告错误等。

在这里它会告诉你getElementsByClass在document上不存在。该方法在末尾称为getElementsByClassName（请注意"名称"）。

一旦过去，你会发现它会抱怨NodeList没有style属性。 getElementsByClassName返回一个NodeList（节点列表，在本例中为元素）。每个都有style，但不是列表。因此，您必须遍历列表才能使用每个元素的样式。

这是不使用jQuery的代码的工作版本，因为我认为您想知道如何在纯JS中执行此操作...

welcomeboxshadow = document.getElementsByClassName("welcometext");
welcomeboxshadow[0].addEventListener('mouseover', 
                                  function() {
                                      var topbox = document.getElementsByClassName("welcomebox");
 topbox[0].setAttribute("class","welcomebox welcomeBoxMouseOver")
                                  }, false)

我将内联样式更改为类，但概念是相同的。

问题主要是无效的函数名称（getElementsByClass*Name*），试图设置不存在的属性（topbox.style.box-shadow

另外，您需要记住，函数返回一个集合，而不是单个元素，因此您需要使用 [0] 引用它。

请注意，我建议不要在此使用原始js方法 案例，我更喜欢使用 jQuery，因为它更干净，一旦你超越了像代码这样简单的东西，你会很高兴你使用了它

这不会使用事件侦听器，但会让您了解如何应用投影。 这使用 jQuery。http://jsfiddle.net/KfwyL/20/

我修改了您的html，因为它不希望您使用头部/身体标签。

<div class="welcomebox"> 
    <h1 class="welcometext" onmouseover="$('.welcomebox').addClass('boxshadow');" onmouseout="$('.welcomebox').removeClass('boxshadow');">Welcome to my site.
    </h1> 
    </div>

.css：

.welcomebox {background-color:#1C0245;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
  width: 390px;
  height: 78px;
    margin-left:100px;
    margin-top:28px;
    border-style:solid;
  border-width:medium;
}
h1 {
    display:inline-block;
    margin-left: 12px;
    height: 40px;
    width: 357px;
    background-color: #670715;
    padding: 4px;
    position: relative;
    bottom: 5px;
    -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
}
h1:hover {background-color: green;}
.boxshadow
{
    box-shadow: 10px 10px 5px #888888;
}
<</div> div class="answers">

这是一个工作版本，盒子阴影在不使用jQuery的情况下正常工作：

现场演示

Javascript：

welcomeboxshadow = document.getElementById("welcomeH1");
welcomeboxshadow.addEventListener('mouseover', function() {var topbox = document.getElementById("welcomeDiv");
topbox.className = "welcomebox shadowed";
}, false)
welcomeboxshadow.addEventListener('mouseout', function() {var topbox = document.getElementById("welcomeDiv");
topbox.className = "welcomebox";
}, false)

网页更改：

  <div class="welcomebox" id="welcomeDiv"> 
    <h1 class="welcometext" id="welcomeH1">Welcome to my site.</h1>

我也不是专家，但为什么不直接添加：.welcomebox：悬停 { box-shadow here }到你的 CSS ？

相关文章：