JS修改CSS

tags: ‘JS’

categories: “JS”

JS修改CSS

修改style样式

通过document.styleSheets[n] // n表示期望修改的样式表序号，从0开始计数来获取到期望修改的样式表，通过cssRules[0]获取到该样式表的css内容，通过style修改特定样式。（此方法比较麻烦，需要清楚指定样式在样式表的顺序）

styleSheets：表示引入的所有CSS文件的数组
cssRules：表示CSS文件中所有定义的样式

var stylesheet = document.styleSheets[0]; // 获取引入的第一个CSS文件
// 获取CSS文件中的第一个设置的CSS样式
stylesheet.cssRules[0].style.backgroundColor = "green";

上面代码实现的本质：更改CSS样式表中的样式。需要定位到是第几个CSS文件和在这个文件中是第几个定义的
// 每个style标签都是一个CSS样式表的文件，引入的CSS也是样式表的文件

修改特定元素节点的style内容

cssText

cssText可以一次性修改多个css属性
cssText会覆盖原来在行内style中定义的样式

document.getElementsByClassName("setAttribute")[0].style.cssText = "width: 300px; background-color: red; height: 200px;"

style.attrName

style.attrName 修改单个属性 attrName的值

document.getElementsByClassName("setAttribute")[0].style.border = "1px solid black"

querySelectorAll()，这个方法中不能查找特殊的伪类元素，会导致所有查找的元素都失效。例如：.scroll-other_scroll .ivu-scroll-container::-webkit-scrollbar-thumb这个选择器就是无效的
querySelectorAll(“.ivu-btn-primary, .scroll-other_scroll .ivu-scroll-container::-webkit-scrollbar-thumb”).setAttribute(‘style’, ‘color:red’);
例如：
// Array.from(document.querySelectorAll(‘.scroll-other_scroll .ivu-scroll-container, .scroll-style’)).forEach(item=>item.style.scrollbarArrowColor = this.$store.state.webInfo.style[‘primary-color’])

通过setAttribute 修改style属性值

setAttribute会覆盖原来在行内style中定义的样式

document.getElementsByClassName("setAttribute")[0].setAttribute('style', 'width: 400px; background-color: yellow; height: 300px;')

动态生成CSS文件引入

动态为页面添加CSS样式文件引用：

if (document.createStyleSheet) { //IE
    document.createStyleSheet("./Themes/Default/MessageTip.css");
}
else { //Firefox, Chrome
    var stylesheet = document.createElement("link");
    stylesheet.href = "./Themes/Default/MessageTip.css";
    stylesheet.rel = "stylesheet";
    stylesheet.type = "text/css";
    document.getElementsByTagName("head")[0].appendChild(stylesheet);
}

动态生成CSS文件引入

使用