Question

我生成了TWBSColor代码，我想在特定时间将所有黑色代码更改为白色或其他颜色（我使用js代码查找实际时间）。即如果是晚上12点，则通过搜索黑色代码并将所有黑色代码替换为白色，将所有黑色代码更改为白色。

   <script>var thehours = new Date().getHours();
        if (thehours >= 8 && thehours < 20) {
            document.body.style.backgroundColor = "white";
            document.getElementById("liniasexy").background='linear- 
gradient(to right, black, #f07f00)';
        } else if (thehours >= 20 && thehours < 8) {
            document.body.style.backgroundColor = "black";

        }
    </script>

我用它来改变背景颜色。

Answer 1

DOM Element object不包含名为background的属性，您应该在该对象的style属性上设置值，如下所示：

document.getElementById("liniasexy").style.background='linear-gradient(to right, black, #f07f00)';

Answer 2

您可以向要切换背景的所有元素添加class属性，并像这样使用document.querySelectorAll('selectors')：

var toggleBackgroundItems = document.querySelectorAll(".toggle_bg");
toggleBackgroundItems.forEach(function(item) {
  item.backgroundColor = 'white';
});

工作示例：

function toggleBg() {
  var toggleBackgroundItems = document.querySelectorAll(".toggle_bg");
  toggleBackgroundItems.forEach(function(item) {
    if(item.style.backgroundColor === 'black') {
      item.style.backgroundColor = 'white';
      item.style.color = 'black';
    } else {   
      item.style.backgroundColor = 'black';
      item.style.color = 'white';
    }
  });
}

#container {
  display:flex
}

#container span {
  width: 50px;
  height: 50px;
  text-align: center;
  border: 1px solid #000;
}

.blue {
 background-color: blue;
}

.green {
 background-color: green;
}

<button onclick="toggleBg()">Toggle background color</button>
<br><br>
<p class="toggle_bg">A paragraph</p>
<div id="container">
  <span class="blue">Blue</span>
  <span class="toggle_bg">Toggle</span>
  <span class="green">Green</span>
  <span class="toggle_bg">Toggle</span>
  <span class="toggle_bg">Toggle</span>
  <span class="green">Green</span>
  <span class="blue">Blue</span>
</div>

我尝试将所有黑色代码更改为白色代码

2 个答案: