16 js动态添加样式

修改HTML标签中的style属性

有两种方式：

div.setAttribute("style","font-size: 44px;");//一次添加多个
div.style.color="white";//style.样式名=样式值;

function test1(){
				var div = document.getElementById("div1");
				//修改标签的style值有两种方式
				div.setAttribute("style","font-size: 44px;");//一次添加多个
				div.style.color="white";//style.样式名=样式值;
			}

修改标签的class属性值

预设好两个样式代码，然后js改变class属性值为准备好的样式代码就好了。

也有两种修改class属性值的方法

　div.className = "style2";
div.setAttribute("class","style2");

function test2(){
				var div = document.getElementById("div1");
				//也有两种办法呢
				div.className = "style2";
				div.setAttribute("class","style2");
			}

修改引入的css文件路径

这个就不用说了，原理一样的啦，将link标签中的href的值改一改就好了。

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
						border: #000000 solid 1px;
						 250px;
						height: 250px;
					}
					.style1{
						background-color:red;
					}
					/* 实现准备好的替换样式style2 */
					.style2{
						background-color: pink; 	
					}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			function test1(){
				var div = document.getElementById("div1");
				//修改标签的style值有两种方式
				div.setAttribute("style","font-size: 44px;");//一次添加多个
				div.style.color="white";//style.样式名=样式值;
			}
			function test2(){
				var div = document.getElementById("div1");
				//也有两种办法呢
				div.className = "style2";
				div.setAttribute("class","style2");
			}
		</script>
		 <h1>js动态改变css样式</h1>
		 <button type="button" onclick="test1()">通过修改标签的style属性</button>
		 <button type="button" onclick="test2()">准备好两个样式，通过修改标签的class属性</button>
		<div class="style1" id = "div1">hello</div>
	</body>
</html>