原文: https://dev.to/karataev/set-css-styles-with-javascript-3nl5
前言
最近查看weblow页面时,发现页面中的某些css在element面板中不能修改,同时导航到最终的style标签,style是空的
image.png
image.png
假设我们有个p标签
rainbow
我们可以通过以下几种方式修改这个段落的颜色
1 inline styles
document.getElementById('target').style.color = 'tomato';
[图片上传失败...(image-e84bb-1589872755479)]
2 Global styles
创建style标签,然后通过写style标签的innerHTML,再append到页面上
var style = document.createElement('style');
style.innerHTML = `
#target {
color: blueviolet;
}
`;
document.head.appendChild(style);
[图片上传失败...(image-2ff026-1589872755479)]
3. CSSOM insertRule
第三种方法比较少见. 可以使用 CSSStyleSheet insertRule
方法.
var style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('#target {color: darkseagreen}');
注意这种方法插入的style,在styles面板中无法修改,因为chrome不让修改 Chrome doesn't allow editing dynamic CSS styles.
通过导航到elements面板中对应的style标签是空的
事实上,这样的行为正是我写这篇文章的动机。一个流行的CSS-in-JS库风格的组件使用这个特性在生产模式中注入样式,因为性能。这个特性在特定的项目或环境中可能是不受欢迎的,有些人会在项目的问题中抱怨它。
[图片上传失败...(image-b5714d-1589872755479)]
4. Constructable Stylesheets (July 2019 update)
// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('#target {color: darkseagreen}');
// Apply the stylesheet to a document:
document.adoptedStyleSheets = [sheet];
目前只有chrome支持