用javascript插入css规则

Insert css rule with javascript

本文关键字：规则 css 插入 javascript      更新时间：2023-09-26

我想用这个代码改变我的div背景从一天的时间，但不工作。我想把它添加到我的嵌入css(第四个链接)。它将添加到剩余的规则中。

var hur = new Date();
    var dyng = hur.getHours()
   if(dyng > 6 && dyng < 18){
     document.styleSheets[3].cssRules[0].style.background="url('/blog/themes/custom/img/sky.jpg')"
   }else{
    document.styleSheets[3].cssRules[0].style.background="url('/blog/themes/custom/img/night.jpg')"
   }
css 

#test {
    background-size: cover;
    width: 100%;
    height: 220px;
}

通常可以通过使用一对jQuery方法以一种简单的方式实现:

.addClass()
.removeClass()

在纯Javascript解决方案中，可以使用一对函数完成相同的操作:

element.setAttribute ("class", "CSS class name");
element.removeAttribute ("class", "CSS class name");

使用JavaScript修改CSS不是一个好主意。

最好在CSS中定义所有的样式，并让JavaScript选择，其中通过添加/删除类来应用这些规则。

你可以使用.className属性的DOM元素(但我建议使用框架)。

也可以使用setAttribute函数

element.setAttribute('class', 'class name');
相关文章：