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;
width: 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>
