真的是不能想象竟然要我们用js搞个全新的样式表出来！这可不仅仅是调整元素的样子或者css样式这么简单呀。想起来就让人头疼得不行，对？
const el = document.createElement('div')
el.style.backgroundColor = 'red'
// 或者
el.style.cssText = 'background-color: red'
// 或者
el.setAttribute('style', 'background-color: red')
// ...
Object.assign(el.style, {
backgroundColor: "red",
margin: "25px"
})
别忘了，关键是要用`.style`跟Object.assign()搭档！以后调整多条样式时，轻松一按就能搞定，不用再为嵌套的小麻烦心烦意乱了。操作起来又快又便捷，特别方便！
// ...
const propertiesCount = el.style.length
for(let i = 0; i < propertiesCount; i++) {
const name = el.style.item(i) // 'background-color'
const value = el.style.getPropertyValue(name) // 're'
const priority = el.style.getPropertyPriority(name) // 'important'
if(priority === 'important') {
el.style.removeProperty()
}
}
// ... el.style.item(0) === el.style[0]; // true
你了解啥叫高级CSS类吗？其实跟”.className”挺像的，但要注意用`.ClassName`时得把这个符号加在每个想修改的元素上。别忘了新添的和原有的都不能遗漏！看起来有点儿繁琐？
// ...
el.className = "class-one class-two";
el.setAttribute("class", "class-one class-two");
说实话，搞个小花招就能搞定了。对了，还能试试新的`.classList`属性。记得IE9那破东西就别试了，IE10和IE11也只能将就着用下。
这个CSSStyleSheet其实就跟原来的StyleSheet差不多，只是改了个名而已。它多出了些看着牛逼，但实际上不能乱改的属性，比如那个.ownerNode，还有.href呀、.title啥的。这些都是从用户自己设置的样式表里冒出来的东西喔！总的说来，HTML可不仅仅是一堆字符，他还可能偷偷藏了好多样式表！每个表格都有它独特的规矩，而且你还能用@import轻易地把其他表格也加进来！
// ...
const classNames = ["class-one", "class-two", "class-three"];
classNames.forEach(className => {
if(!el.classList.contains(className)) {
el.classList.add(className);
}
});
for(styleSheet of document.styleSheets){
console.log(styleSheet);
}
你看懂了吗？不用慌张，这个”Rules”和CSSRuleList几乎是一样滴，只是这儿的”index”是从0开始计数，就好像HTML中的CSS样式排序那样。每个CSSStyleSheet里面都藏着各种各样的CSSStyleRule，其实这些就相当于咱们平常见到的CSS样式！
就是想要搞个小工具出来，把样式配对文件输进去，就能弄出一堆新样式class。你最好能看得懂ES6或者别的JavaScript组件模块，这样其他人就没法捣乱你的样式。比如说，加入”HSOfDS(XSSID_css)”这个标识，就能知道什么时候该用它了。搞定之后，新样式表就会直接放到document.styleSheets里面，只需要用’sheet’这个属性去找就可以了。觉得这个点子怎么样？挺有用的？
瞅见了没？要是想要修改网页上的DOM元素样式或修改CSS类别啥的，就试试这俩方法。第一种是在DOM元素后面加上”.”,然后再用Object.assign()方法，简单又方便。第二种则是直接控制.classList属性，你们懂的，超实用！快试试这些小技巧，有无新灵感，欢迎来评论区分享！别忘了给自己点赞哟~然后别忘了跟亲朋好友们炫耀一番！
// ...
const ruleIndex = styleSheet.insertRule("div {background-color: red}");
styleSheet.deleteRule(ruleIndex);
评论0