Question

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="practise.css"/>
        <script type="text/javascript" src="practise.js"></script>
    </head>
    <body>
        <div id="items"><p id="help">Hello World</p></div>


        <script>
            var para=document.getElementById('help');
            var check=true;

            //want to return these styles whenever mouse is clicked
            function toggle(){
                if(check){
                            para.style.color="#EEFFCC";
                            para.style.textAlign="center";
                            para.style.fontSize="1em";
                }else{
                            para.style.color="#223311";
                            para.style.textAlign="center";
                            para.style.fontSize="4em";

                }
                check=!check;
            }

            para.onclick=toggle();

        </script>    
    </body>
</html>

我想要制作的代码是，只要鼠标被舔，它就会在两组样式之间切换＆＃39; para＆＃39;元件。但是，我无法弄清楚如何将样式返回到＆＃39; para.onclick＆＃39;在函数下方调用。

Answer 1

当您点击它调用切换的onClick时，只需创建一个小功能，就像这样para.onclick = function() {}。

＆＃13;

var para = document.getElementById('help');
var check = true;

function toggle() {
  if (check) {
    para.style.color = "blue";
    para.style.textAlign = "center";
    para.style.fontSize = "1em";
  } else {
    para.style.color = "red";
    para.style.textAlign = "center";
    para.style.fontSize = "4em";
  }
  check = !check;
}
para.onclick = function() {
  toggle()
};

＆＃13;

<div id="items">
  <p id="help">Hello World</p>
</div>

＆＃13;

Answer 2

目前你在做：

para.onclick = toggle();

这意味着para.onclick将是执行toggle()的结果。

您要做的是将toggle分配给para.onclick：

para.onclick = toggle;

区别在于：

function result() {
    return 2;
}
var res = result(); 
// res = 2
var fnRes = result;
// fnRes = function() { return 2; }

返回样式集

2 个答案: