JS操作HTML元素的CSS样式

最新推荐文章于 2023-03-23 16:57:51 发布

原创最新推荐文章于 2023-03-23 16:57:51 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

网页前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用JavaScript来动态修改CSS样式的方法。具体地，通过document.styleSheets属性获取样式表集合，进而通过rules或cssRules属性访问选择器集合，并最终实现对指定选择器样式的更改。

function ChangeColor(e)
{
	// 通过document.styleSheets属性可以获得样式表集合，下标与<link/>的顺序对应
	// rules表示获得样式表选择器集合
	var rules = document.styleSheets[0].rules; //IE是rules 其它的是cssRules
	// 通过选择器集合就可以获得要操作的选择器
	var style2 = rules[1];
	//改变选择器的属性
	style2.style.backgroundColor = "red";
}