JS改變 HTML 樣式(CSS)、display(顯示或者隱藏元素)

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢？

語法:

Object.style.property=new style;

注意:Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。

基本屬性表（property）:

注意:該表只是一小部分CSS樣式屬性，其它樣式也可以通過該方法設置和修改。

看看下面的代碼:

改變 <p> 元素的樣式，將顏色改為紅色，字號改為20,背景顏色改為藍：

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

結果:

 

 

 

 

顯示和隱藏（display屬性）：

網頁中經常會看到顯示和隱藏的效果，可通過display屬性來設置。

語法：

Object.style.display = value

注意:Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。

value取值: