使用JavaScript或jQuery定义全局CSS类



是否有办法使用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)

相关内容

  • 没有找到相关文章

最新更新