修改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>