堆栈内存溢出
  繁体   English   中英

我正在尝试使用Javascript更改CSS元素，但无法正常工作

[英]I'm trying to change a CSS element with Javascript but it's not working

 原文  2018-06-23 06:37:53  2   7    javascript/ html/ css

问题描述

因此，我尝试使用javascript更改网站的背景颜色。 我希望它在特定时间改变。 但这似乎不起作用。 我已经运行了每种组合，但是bg颜色始终保持CSS中描述的默认颜色。

JS代码似乎添加了新的代码行，而不是修改CSS。 我怎么知道计算机将首先读取代码的哪一部分？ 是CSS优先还是内联代码/ HTML优先？ TIA 

 var now = new Date(); var hours = now.getHours(); //Keep in code - Written by Computerhope.com //Place this script in your HTML heading section document.write('It\\'s now: ', hours, '<br><br>'); document.bgColor = "White"; //5am-7am morning if (hours > 5 && hours < 7) { document.write('<body style="background-color: #FFF95D">'); } //7am-12pm noon else if (hours > 7 && hours < 12) { document.write('<body style="background-color: #B3E5FC">'); } //12pm-4pm afternoon else if (hours > 12 && hours < 16) { document.write('<body style="background-color: #7E57C2">'); } //4pm-7pm evening else if (hours > 16 && hours < 19) { document.write('<body style="background-color: #EF5444">'); } //7pm-10pm Night else if (hours > 19 && hours < 22) { document.write('<body style="background-color: #424242">'); } //1opm-5am Nighting else if (hours > 22 && hours < 7) { document.write('<body style="background-color: #000000">'); } 
  body { display: flex; align-items: center; justify-content: center; overflow: hidden; max-width: 100%; height: 100%; color: #455A64; font-family: var(--fontFamily); font-size: var(--fontSizeMd); line-height: var(--lineHeightMd);

7 个解决方案

解决方案1
 3  2018-06-23 06:48:48

document.write（）基本上会将新行代码添加到文档中，这就是html本身。 这里的目的是仅更改主体的背景颜色属性。 您可以使用例如： 

document.body.style.backgroundColor = "red";

解决方案2
 2 已采纳  2018-06-23 07:26:02

1）当您使用document.write() ，HTML文档已完全加载，将删除所有现有的HTML，因此请使用document.body.style.background更改正文的颜色。

2）要自动更改颜色，请使用setInterval 。

3）将else if (hours > 22 && hours < 7) {的else {行更改为else {因为不存在大于22且小于7的数字。 

var el = document.getElementById('time');

(function(){
  setInterval(function(){
    var now = new Date();
    var hours = now.getHours();
    el.innerHTML = ('It\'s now: ' + hours + '<br><br>');
    //5am-7am morning
    if (hours > 5 && hours <= 7) { document.body.style.background ='#FFF95D'; }
    //7am-12pm noon
    else if (hours > 7 && hours <= 12) { document.body.style.background ='#B3E5FC'; }
    //12pm-4pm afternoon
    else if (hours > 12 && hours <= 16) { document.body.style.background = "#7E57C2"; }
    //4pm-7pm evening
    else if (hours > 16 && hours <= 19) { document.body.style.background = "#EF5444"; }
    //7pm-10pm Night
    else if (hours > 19 && hours <= 22) { document.body.style.background = "#424242"; }
    //1opm-5am Nighting
    else  { document.body.style.background = "#000000"; }
    },1000);
})();


 var el = document.getElementById('time'); (function(){ setInterval(function(){ var now = new Date(); var hours = now.getHours(); el.innerHTML = ('It\\'s now: ' + hours + '<br><br>'); //5am-7am morning if (hours > 5 && hours <= 7) { document.body.style.background ='#FFF95D'; } //7am-12pm noon else if (hours > 7 && hours <= 12) { document.body.style.background ='#B3E5FC'; } //12pm-4pm afternoon else if (hours > 12 && hours <= 16) { document.body.style.background = "#7E57C2"; } //4pm-7pm evening else if (hours > 16 && hours <= 19) { document.body.style.background = "#EF5444"; } //7pm-10pm Night else if (hours > 19 && hours <= 22) { document.body.style.background = "#424242"; } //1opm-5am Nighting else { document.body.style.background = "#000000"; } },1000); })(); 
 body { display: flex; align-items: center; justify-content: center; overflow: hidden; max-width: 100%; height: 100%; color: #455A64; font-family: var(--fontFamily); font-size: var(--fontSizeMd); line-height: var(--lineHeightMd); } 
 <span id="time"></span>

您可以这样使用switch而不是else if ： 

var el = document.getElementById('time');

(function(){

  setInterval(function(){
    var now = new Date();
    var hours = now.getHours();
    el.innerHTML = ('It\'s now: ' + hours + '<br><br>');

    switch(true) {
        case (hours > 5 && hours <= 7):
          document.body.style.background ='#FFF95D';
          break;
        case (hours > 7 && hours <= 12):
          document.body.style.background ='#B3E5FC';
          break;
        case (hours > 12 && hours <= 16):
          document.body.style.background = "#7E57C2";
          break;
        case (hours > 16 && hours <= 19):
          document.body.style.background = "#EF5444";
          break;
        case (hours > 19 && hours <= 22):
          document.body.style.background = "#424242";
          break;
        default:
          document.body.style.background = "#000000";
      }

    },1000);

})();

解决方案3
 0  2018-06-23 06:48:45

而不是尝试这种方式。

在javascript中：代替document.write()执行此操作 

document.body.style.backgroundColor="#xxxxxx"

解决方案4
 0  2018-06-23 06:50:05

您应该使用它而不是document.write： 

document.body.style.backgroundColor = "some_color";

其中some_color是您选择的颜色之一

解决方案5
 0  2018-06-23 06:53:03

当您在javascript中提供样式以覆盖之前指定的背景色时，请使用！important属性。 示例：style ='background-color：#fff！important'

解决方案6
 0  2018-06-23 07:06:41

如果您只想更改主体的颜色，请使用document.body.style.backgroundColor或document.bgColor

document.bgColor获取或设置当前文档的背景色。

write()方法将HTML表达式或JavaScript代码写入文档。

write()方法主要用于测试：如果在完全加载HTML文档后使用它，它将删除所有现有的HTML。 

 var now = new Date(); var hours = now.getHours(); //Keep in code - Written by Computerhope.com //Place this script in your HTML heading section document.write('It\\'s now: ', hours, '<br><br>'); document.bgColor = 'white'; //5am-7am morning if (hours > 5 && hours < 7) { document.body.style.backgroundColor = '#FFF95D'; } //7am-12pm noon else if (hours > 7 && hours < 12) { document.body.style.backgroundColor = '#B3E5FC'; } //12pm-4pm afternoon else if (hours > 12 && hours < 16) { document.body.style.backgroundColor = '#7E57C2'; } //4pm-7pm evening else if (hours > 16 && hours < 19) { document.body.style.backgroundColor = '#EF5444'; } //7pm-10pm Night else if (hours > 19 && hours < 22) { document.body.style.backgroundColor = '#424242'; } //1opm-5am Nighting else if (hours > 22 && hours < 7) { document.body.style.backgroundColor = '#000000'; } 
 body { display: flex; align-items: center; justify-content: center; overflow: hidden; max-width: 100%; height: 100%; color: #455A64; font-family: var(--fontFamily); font-size: var(--fontSizeMd); line-height: var(--lineHeightMd); }

解决方案7
 0  2018-06-23 07:14:04

您正在尝试在其边界时间运行此代码。 例如，在12点时，这两个条件都不满足，即（hours <12）和（hours> 12），因此将“ <=”代替<

试试这个代码： 

 <script type="text/javascript">
        var now = new Date();
        var hours = now.getHours();

        //Keep in code - Written by Computerhope.com
        //Place this script in your HTML heading section

        document.write('It\'s now: ', hours, '<br><br>');
        document.bgColor = "White";

        //5am-7am morning
        if (hours > 5 && hours <= 7) {
          document.write('<body style="background-color: #FFF95D">');
        }
        //7am-12pm noon
        else if (hours > 7 && hours <= 12) {
          document.write('<body style="background-color: #B3E5FC">');
        }
        //12pm-4pm afternoon
        else if (hours > 12 && hours <= 16) {
          document.write('<body style="background-color: #7E57C2">');
        }
        //4pm-7pm evening
        else if (hours > 16 && hours <= 19) {
          document.write('<body style="background-color: #EF5444">');
        }
        //7pm-10pm Night
        else if (hours > 19 && hours <= 22) {
          document.write('<body style="background-color: #424242">');
        }
        //1opm-5am Nighting
        else if (hours > 22) {
          document.write('<body style="background-color: #000000">');
        }
        </script>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 此JavaScript代码有什么问题？ 我正在尝试更改的文本 <h1> 点击元素 尝试使用 JavaScript 更改元素的颜色，我得到未定义的错误 我正在尝试选择要使用的元素： 我正在尝试使用 jquery 更改 textarea 内标签的顺序，但它不起作用？ 我正在尝试使用 javascript 创建一个绘图应用程序，但它应该发生的 canvas 元素没有响应。 我的代码有什么问题？ 我正在尝试使用Bluebird的方法Promisify并且它不起作用 我正在尝试从JavaScript内加载js和CSS文件 我正在尝试使用当前类制作CSS和Javascript菜单 我正在尝试在 js 文件中包含 CSS 代码。 但不工作 Javascript：我试图通过向元素添加 class 来操纵 HTML
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM