Question

<html>
<head>
<title>Events!</title>

<!-- Loading my CSS -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="box-container">
    <div class="box" id="box1">I'm a box</div>
    <div class="box" id="box2">I'm a box</div>
    <div class="box" id="box3">I'm a box</div>
</div>

<div class="box" id="tricky-box">Tricky box</div>

<button id="secret-button">Super Secret</button>

<input id="secret-input"></input>

<!-- Ignore this stuff till later -->
<br>
<hr>
<hr>
<hr>
<br>

<div class="d1">1
    <div class="d2">2
        <div class="d3">3</div>
    </div>
</div>




<!-- Loading my JS -->
<script src="js/myapp.js" type="text/javascript"></script>

所以我想让box2在mouseon上将颜色改为红色，我想知道这是正确的：

 window.onload = function() {

 box2.onmouseover = function(event){
box2.setAttribute = ("style", "background-color: red;"); 
 }

颜色没有改变。显然，我做错了什么。有谁知道这个问题？感谢。

Answer 1

setAttribute是一种方法，而不是对象属性。

您可以执行DOM样式对象：

box2.style.backgroundColor = "red";

或正确的setAttribute方法：

box2.setAttribute("style","background-color:red");

有关文档，请参阅MDN。

Answer 2

修正了你的脚本。检查代码段 -

box2.onmouseover = function(event){
  box2.style.backgroundColor  = "red"; 
 }

<div id="box-container">
    <div class="box" id="box1">I'm a box</div>
    <div class="box" id="box2">I'm a box</div>
    <div class="box" id="box3">I'm a box</div>
</div>

<div class="box" id="tricky-box">Tricky box</div>

<button id="secret-button">Super Secret</button>

<input id="secret-input"></input>

<!-- Ignore this stuff till later -->
<br>
<hr>
<hr>
<hr>
<br>

<div class="d1">1
    <div class="d2">2
        <div class="d3">3</div>
    </div>
</div>

Answer 3

你只犯了一个错误。只需删除等号，您的代码即可运行。

您的代码

    <header>

  <nav class="mobile-nav-wrap" role="navigation">
    <ul class="mobile-header-nav">
      <li> 
        <a href="#" class="sub-toggle">Overview</a>
      <ul class="subnav">
      <li><a href="#">Nav Item 1</a></li>
      <li><a href="#">Nav Item 2</a></li>
      <li><a href="#">Nav Item 3</a></li>
      </ul>
      </li>
      <li><a class="sub-toggle" href="#">Resources</a>
       <ul class="subnav">
      <li><a href="#">Nav Item 1</a></li>
      <li><a href="#">Nav Item 2</a></li>
      <li><a href="#">Nav Item 3</a></li>
      </ul>
      </li>
      <li><a class="sub-toggle" href="#">Service</a>
       <ul class="subnav">
      <li><a href="#">Nav Item 1</a></li>
      <li><a href="#">Nav Item 2</a></li>
      <li><a href="#">Nav Item 3</a></li>
      </ul>
      </li>
    </ul>
  </nav>

  <a class="mobile-menu-toggle js-toggle-menu" href="#">
   Get Started
  </a>

</header>
<script>
$().ready(function()
{
$('.js-toggle-menu').click(function(e){
  $('.sub-toggle').slideToggle();
    $('.sub-toggle').each(function()
    {
        $(this).closest('li').find('.subnav').hide();
    });
});

$('.sub-toggle').click(function(){
    $(this).closest('li').find('.subnav').slideToggle();
});
});
</script>

更正代码

 window.onload = function() {

 box2.onmouseover = function(event){
box2.setAttribute = ("style", "background-color: red;"); 
 }

有关详细信息，请参阅以下链接。

document.setAttribute

Answer 4

您可以使用getElementById（）实现此目的，然后设置引用css类的类名，如本工作示例所示：

<html>
<head>
  <title>Events!</title>
  <style>
  .red {
    background-color: red;
  }
  </style>
  <script>
     window.onload = function() {
        box2.onmouseover = function(event){
          alert("Hello");
          var box = document.getElementById("box2");
          box.className = box.className + " red";
        }
      }
  </script>

  </head>
<body>
<div id="box-container">
    <div class="box" id="box1">I'm a box</div>
    <div class="box" id="box2">I'm a box</div>
    <div class="box" id="box3">I'm a box</div>
</div>

<div class="box" id="tricky-box">Tricky box</div>

<button id="secret-button">Super Secret</button>

<input id="secret-input"></input>

<!-- Ignore this stuff till later -->
<br>
<hr>
<hr>
<hr>
<br>

<div class="d1">1
    <div class="d2">2
        <div class="d3">3</div>
    </div>
</div>


</body>
</html>

Answer 5

出于纯粹的好奇心：为什么你不能用CSS做到这一点？

#box2:hover {
    background: red;
}

如果我想让box2在mouseon上将颜色更改为红色，那么使用setAttribute是否正确？

5 个答案: