javascript修改元素css樣式的三種方法（程式碼）
- 不言原創
- 2018-08-21 14:46:5420721瀏覽
這篇文章帶給大家的內容是關於javascript修改元素css樣式的三種方法（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
修改元素的css樣式一般是標籤的style屬性中或頭部的style標籤中進行增刪與修改。
下為利用JS修改元素的css樣式的三種較為實用的方式。
第一種:取得對應標籤對應的javascript物件.style，進行賦值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.square{
width: 300px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<p class=""></p>
<script>
//第一种:获取相应标签对应的 javascript对象. style
(function(){
var p= document. getElementsByTagName("p")[0];
p.style.backgroundColor=red;
p style. width= "300px";
p style. height="300px";
})();
</script>
</body>
</html>第二種:取得對應標籤對應的javascript物件. className
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.square{
width: 300px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<p class=""></p>
<script>
//第二种:获取相应标签对应的 javascript对象. className
var p= document. getElementsByTagName("p")[0];
p.className="square";
</script>
</body>
</html>第三種：透過setAttribute("屬性名稱","屬性值") [更廣義層面上]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.square{
width: 300px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<p class=""></p>
<script>
//第三种：通过setAttribute("属性名","属性值")
var p= document. getElementsByTagName("p")[0];
p.setAttribute("class","square");
p.removeAttribute("class");
</script>
</body>
</html>相關推薦：
#如何修改iframe裡面元素的css樣式，不跨域_html/css_WEB-ITnose
JavaScript修改css樣式style動態改變元素樣式_javascript技巧
#以上是javascript修改元素css樣式的三種方法（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn