javascript如何修改元素的樣式

admin發表於2017-03-08
JavaScript

通過javascript可以動態的控制元素的CSS屬性值，下面就簡單介紹一下常用的幾種方法:

一.通過style標籤控制行內樣式:

可以通過javascript物件的style屬性來控制元素的行內樣式，例如:

[HTML] 純文字檢視 複製程式碼
<script type="text/javascript">
window.onload=function(){
  var mayi=document.getElementById("mayi");
  mayi.style.color="green";
}
</script>
<body>
<div id="mayi">螞蟻部落歡迎您</div>
</body>
</html>

以上程式碼可以將div中的字型顏色設定為綠色。也可以讀取行內樣式屬性值，例如

[HTML] 純文字檢視 複製程式碼
<script type="text/javascript">
window.onload=function()
{
  var mayi=document.getElementById("mayi");
  alert(mayi.style.color);
}
</script>
<body>
<div id="mayi" style="color:red">螞蟻部落歡迎您</div>
</body>
</html>

以上程式碼可以彈出div的color屬性值red。

特別說明:此方法只能夠獲取div的行內樣式屬性值，不能夠獲取其他方式宣告的樣式屬性值。

二.通過className設定元素的class:

通過元素的className設定元素的class屬性，例如:

[HTML] 純文字檢視 複製程式碼
<style type="text/css">
.mytest
{
  color:red;
}
</style>
</head>
<script type="text/javascript">
window.onload=function()
{
  var mayi=document.getElementById("mayi");
  mayi.className="mytest";
}
</script>
<body>
<div id="mayi">螞蟻部落歡迎您</div>
</body>
</html>

以上程式碼可以給設定class屬性值，能夠相容所有瀏覽器。

三.使用currentStyle或者getComputedStyle()獲取元素樣式屬性:

以上程式碼都可以設定，使用currentStyle和getComputedStyle()只能夠獲取樣式屬性，這裡就不多介紹了，具體可以參閱 js如何獲取非內部取樣式表中定義的屬性值一章節。

相關文章