JS动态添加css样式

最新推荐文章于 2024-08-19 08:00:00 发布

猿来是你_forgere

最新推荐文章于 2024-08-19 08:00:00 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： css3 css js html chrome

本文链接：https://blog.csdn.net/weixin_42183524/article/details/108146412

版权

javascript 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

JS动态添加css样式

用到的特性是 CSSStyleSheet.

添加style rule

function click(){
	const sheet = new CSSStyleSheet()
	sheet.insertRule(`body {
		font-size: 10px;
	}`);
	// 应用规则到document
	document.adoptedStyleSheets = [sheet];
}

替换规则

sheet.replaceSync(`body {
		font-size: 30px;
}`);
// 应用规则到document
document.adoptedStyleSheets = [sheet];

带有回调的替换

sheet.replace('a { color: blue; }')
  .then(() => {
    console.log('Styles replaced');
  })
  .catch(err => {
    console.error('Failed to replace styles:', err);
  });

CSS @import

sheet.replaceSync('@import url("styles.css"); a { color: red; }');

动态创建node 应用样式到该节点

const node = document.createElement('div');
node.innerText = 'div'
document.body.append(node)
const sheet = new CSSStyleSheet()
sheet.insertRule(`div {
    color: red;
}`)
document.adoptedStyleSheets = [sheet]