Question

我想通过使用javascript在div中获得样式，但是我有一个问题我不知道为什么。我为我的div设置了背景颜色，当我单击按钮时，它更改了我的背景色div，但是第一次加载页面时，我必须两次单击此按钮，然后我的颜色div才改变。之后，我必须单击一次。这是我的代码：

window.onload = function() {

       var color = document.querySelector('body');
       var button = document.querySelector('button');

       console.log('OK');
       button.addEventListener('click', changeMode);
       function changeMode(evt){
              if (color.style.background=="")            //comment
                     color.style.background = 'white'; 
              if (color.style.background == 'white'){
                     color.style.background ='black';
                     color.style.color = 'white';
                     button.innerHTML='Dark';
              }
              else{
                     color.style.background ='white';
                     color.style.color = '#021373';
                     button.innerHTML='Light';
              }
       }
}

<body>
<button>Click</button>
</body>

我知道是否要注释行

   if (color.style.background=="")           
      color.style.background = 'white';

页面加载时，color.style.background为null，因此我必须在第一次设置为“ none”。有人为我解释了这个问题。谢谢

Answer 1

说明

但是第一次加载页面时，我必须单击此按钮两次，然后我的色域改变

这是因为默认的主体计算样式为白色，而您仅检查插入样式。检出computes styles

解决方案

您只能设置并检查element.style.backgroundColor属性，否则，如果要使用element.style.background，请更改逻辑以检查其是否为空。

要进行切换，实际上只需要两个步骤[空（=白色）或不空（=黑色）]。

window.onload = function() {
       var color = document.querySelector('body');
       var button = document.querySelector('button');

       button.addEventListener('click', changeMode);
       
       function changeMode(evt){
              var tColor = color.style.backgroundColor;
              if(!tColor){
                  color.style.backgroundColor ='black';
                  color.style.color = 'white';
                  button.innerHTML='Dark';
              }
              else{
                  color.style.backgroundColor ='';
                  color.style.color = '#021373';
                  button.innerHTML='Light';
              }
       }
}

<button>Light</button>

不过，请注意，在这种情况下，正确的方法是切换一个包含样式覆盖的类。

window.onload = function() {      
       function changeMode(evt){
              var tBody = document.querySelector('body');
              
              //REM: Check if dark
              if(tBody.classList.contains("dark")){
                tBody.classList.remove("dark");
                this.innerHTML = 'Dark'
              }
              else{
                tBody.classList.add("dark");
                this.innerHTML = 'Light'
              }
       };
       
       document.querySelector('button').addEventListener('click', changeMode);
}

body{
  background-color: white;
  color: #021373
}

body.dark{
  background-color: black;
  color: white
}

<button>Dark</button>

Answer 2

如果将活动颜色设置为变量，则单击它以确定活动颜色，然后将其值更改。查看我的代码段：

var button = document.querySelector('button');
button.addEventListener('click', myFunction);
 
var change = "";
function myFunction() {
    if(change == "" || change == "blue"){
      document.body.style.backgroundColor = "red";
      change = "red";
    }else if (change == "red"){
      document.body.style.backgroundColor = "black";
      change = "black";
    }else {
      document.body.style.backgroundColor = "blue";
      change = "blue";
    }
}

<h1>Hello World!</h1>

<button type="button">Set background color</button>

Answer 3

一个简单的解决方案是在开始时将背景设置为白色。但是否则您的支票就可以了！

window.onload = function() {

       var color = document.querySelector('body');
       var button = document.querySelector('button');

       console.log('OK');
       button.addEventListener('click', changeMode);
       function changeMode(evt){
              if (color.style.background == 'white'){
                     color.style.background ='black';
                     color.style.color = 'white';
                     button.innerHTML='Dark';
              }
              else{
                     color.style.background ='white';
                     color.style.color = '#021373';
                     button.innerHTML='Light';
              }
       }
}

<body style="background: white;">
<button>Click</button>
</body>

按ID更改样式元素获取元素

3 个答案:

说明

解决方案