DOM-设置样式

java_zhaoyanli

于 2016-03-01 23:48:00 发布

阅读量459

点赞数

分类专栏： web-javascript 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/50776593

版权

web-javascript 专栏收录该内容

93 篇文章

订阅专栏

本文介绍了一种通过JavaScript动态修改HTML页面中特定元素样式的实现方法。主要步骤包括：获取样式表对象，获取所有样式规则，定位到目标规则并修改其背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
	<style>
		#d1{
			width:100px;
			height:100px;
			background-color:red;
		}

		.test{
			background:yellow;
		}
	</style>
	<script>
		function changeStyle(){
			//1、获取样式表对象
			var sheets = document.styleSheets;
			var sheet = sheets[0];
			//2、获取 sheet 中所有的样式规则
			var rules = sheet.rules;
			//3、获取 某一具体规则
			var rule = rules[0];
			console.log(rule);
			//4、设置 属性
			rule.style.backgroundColor="yellow";
		}
	</script>
 </head>

 <body>
	<button οnclick="changeStyle()">设置样式</button>
  <div id="d1"></div>
 </body>
</html>