是否有办法使用JavaScript或jQuery设置全局类的CSS ?也就是说,将.my_class { foo:bar }
附加到页面的<style/>
标签后面。
纯javascript -
var style=document.createElement('style');
style.type='text/css';
if(style.styleSheet){
style.styleSheet.cssText='your css styles';
}else{
style.appendChild(document.createTextNode('your css styles'));
}
document.getElementsByTagName('head')[0].appendChild(style);
是的,你可以在jQuery中这样做:
var styleTag = $('<style>.my_class { foo: bar; }</style>')
$('html > head').append(styleTag);
它通过简单地在<head>
的末尾附加<style>
标签来工作。
这似乎是2023年的方式:
const sheet = new CSSStyleSheet()
sheet.replaceSync('div {padding: 2px;}')
document.adoptedStyleSheets = [sheet]
为现有工作表添加更多样式:
let index = sheet.cssRules.length
sheet.insertRule('span {color: red;}', index)