Question

在下面的代码中，

<!DOCTYPE html>
<html>
    <head>
        <title>Button events</title>
        <meta charset="UTF-8">
        <style type="text/css">
            button{
                background-color: #00FFFF;
                border: 2px solid orange;
                border-radius: 10px;
                width: 60px;
                height: 30px;
                color:white;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
            document.body.lastElementChild.onclick = changeColor;
            function changeColor(){
                if(document.body.lastElementChild.innerHTML == "Like"){
                    document.body.lastElementChild.style.background-color = "#FF9966";
                    document.body.lastElementChild.innerHTML = "Unlike";    
                }else{
                    document.body.lastElementChild.style.background-color="#00FFFF";
                    document.body.lastElementChild.innerHTML = "Like";  
                }
            }
        </script>
        <button type="button" name="LikeUnlike">Like</button>

    </body>
</html>

在行document.body.lastElementChild.style.background-color = "#FF9966";处抛出

错误。错误是Invalid left-hand side in assignment。

如何解决此错误？

注意：尚未学习JQuery

Answer 1

首先，您需要使用element.style.backgroundColor而不是element.style.background-color。

Here是JS等价的CSS属性列表。

您的第二个问题是您的脚本在加载<button>之前执行，从而使脚本成为lastElementChild的当前body。

您可以通过将脚本包装在window.onload：

中来解决此问题

（另外，选择带document.body.lastElementChild的按钮一定会给你错误，因为你很可能在某个时候会在按钮后添加一些东西）

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Button events</title>
  <meta charset="UTF-8">
  <style type="text/css">
    button {
      background-color: #00FFFF;
      border: 2px solid orange;
      border-radius: 10px;
      width: 60px;
      height: 30px;
      color: white;
    }
  </style>
</head>

<body>
  <script type="text/javascript">
    window.onload = function() {
      
      var likeButton = document.getElementById("like-button");
      likeButton.onclick = changeColor;

      function changeColor() {
        if (likeButton.innerHTML == "Like") {
          likeButton.style.backgroundColor = "#FF9966";
          likeButton.innerHTML = "Unlike";
        } else {
          likeButton.style.backgroundColor = "#00FFFF";
          likeButton.innerHTML = "Like";
        }
      }
    }
  </script>
  <button type="button" name="LikeUnlike" id="like-button">Like</button>

</body>

</html>

＆＃13;

Answer 2

background-color不是有效的JavaScript标识符。要使用DOM样式对象进行设置，在驼峰的情况下它应该是backgroundColor。

有关http://www.w3schools.com/jsref/dom_obj_style.asp

的DOM样式对象的更多信息

Answer 3

查看我的demo

JS

document.body.lastElementChild.onclick = changeColor;
            function changeColor(){
                if(document.body.lastElementChild.innerHTML == "Like"){
                    document.body.lastElementChild.style.backgroundColor  = "#FF9966";
                    document.body.lastElementChild.innerHTML = "Unlike";    
                }else{
                    document.body.lastElementChild.style.backgroundColor ="#00FFFF";
                    document.body.lastElementChild.innerHTML = "Like";  
                }
            }

Answer 4

我认为您应该使用document.body.lastElementChild.style["background-color"]为元素设置颜色

Answer 5

不是背景颜色而是backgroundColor。试试这个，看看是否有效 document.body.lastElementChild.style.backgroundColor = "#FF9966";
总代码：

document.body.lastElementChild.onclick = changeColor;
    function changeColor(){
        if(document.body.lastElementChild.innerHTML == "Like"){
            document.body.lastElementChild.style.backgroundColor  = "#FF9966";
            document.body.lastElementChild.innerHTML = "Unlike";    
        }else{
            document.body.lastElementChild.style.backgroundColor ="#00FFFF";
            document.body.lastElementChild.innerHTML = "Like";  
        }
    }

Answer 6

您使用此代码。它工作正常。

<!DOCTYPE html>
<html>
    <head>
        <title>Button events</title>
        <meta charset="UTF-8">
        <style type="text/css">
            button{
                background-color: #00FFFF;
                border: 2px solid orange;
                border-radius: 10px;
                width: 60px;
                height: 30px;
                color:white;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
            document.body.lastElementChild.onclick = changeColor;
            function changeColor(){
                if(document.body.lastElementChild.innerHTML == "Like"){
                    document.body.lastElementChild.style.backgroundColor = 

"#FF9966";
                    document.body.lastElementChild.innerHTML = "Unlike";    
                }else{


document.body.lastElementChild.style.backgroundColor="#00FFFF";
                    document.body.lastElementChild.innerHTML = "Like";  
                }
            }
        </script>
        <button type="button" name="LikeUnlike" onclick="changeColor

()">Like</button>

    </body>
</html>

Answer 7

您可以使用Jquery分配或删除css类，使用以下代码为按钮添加颜色：

<script>
    $(function() {
        $('button').on('click', function() {
            $(this).toggleClass('other-color');
        });
    });
</script>

toggleClass 函数是添加和删除css类， “ othercolor ”是您的班级css，其中包含按钮的样式。

在</body>之前和上面的代码之前包含此脚本的jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

像这样：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
        $(function() {
            $('button').on('click', function() {
                $(this).toggleClass('other-color');
            });
        });
</script>

我希望它可以帮到你。

如何处理按钮的onclick事件？

7 个答案: