如何以原生JavaScript修改CSS屬性程式碼範例詳解

用JavaScript修改CSS屬性 只有寫原生的javascript了。

用JS修改標籤的class 屬性值： 

class 屬性是標籤上引用樣式表的方法之一，它的值是一個樣式表的選擇符，如果改變了class屬性的值，標籤所引用的樣式表也就被更換了，所以這屬於第一種修改方法。

更改一個標籤的class 屬性的程式碼是： 

document.getElementById( id ).className = 字串; 

document.getElementById( id ) 用來取得標籤對應的DOM 對象，你也可以用其它方法來取得。 className 是 DOM 物件的一個屬性，它對應到標籤的 class 屬性。字串 是 class 屬性的新值，它應該是一個已定義的CSS選擇符。 

利用這個方法可以把標籤的CSS樣式表替換成另一個，也可以讓一個沒有套用CSS樣式的標籤套用指定的樣式。

範例： 

<style type="text/css"> 
.txt { 
font-size: 30px; font-weight: bold; color: red; 
} 
</style> 
<p id="tt">欢迎光临！</p> 
<p><button onclick="setClass()">更改样式</button></p> 
<script type="text/javascript"> 
function setClass() 
{ 
document.getElementById( "tt" ).className = "txt"; 
} 
</script>

用JS修改標籤的style 屬性值： 
style 屬性也是標籤上引用樣式表的方法之一，它的值是一個CSS樣式表。 DOM 物件也有style 屬性，不過這個屬性本身也是一個對象，Style 物件的屬性和CSS 屬性是一一對應的，當改變了Style 物件的屬性時，對應標籤的CSS 屬性值也就改變了，所以這屬於第二種修改方法。

更改一個標籤的CSS 屬性的程式碼是： 

document.getElementById( id ).style.屬性名稱= 值; 
document.getElementById( id ) 用來取得標籤對應的DOM 對象，你也可以用其它方法來取得。 style 是 DOM 物件的屬性，它本身也是一個物件。屬性名 是 Style 物件的屬性名，它和某個CSS屬性是相對應的。 

說明：這種方法修改的單一的一個CSS屬性，它不會影響標籤上其它CSS屬性值。 

範例： 

p id="t2">欢迎光临！</p> 
<p><button onclick="setSize()">大小</button> 
<button onclick="setColor()">颜色</button> 
<button onclick="setbgColor()">背景</button> 
<button onclick="setBd()">边框</button> 
</p> 
<script type="text/javascript"> 
function setSize() 
{ 
document.getElementById( "t2" ).style.fontSize = "30px"; 
} 
function setColor() 
{ 
document.getElementById( "t2" ).style.color = "red"; 
} 
function setbgColor() 
{ 
document.getElementById( "t2" ).style.backgroundColor = "blue"; 
} 
function setBd() 
{ 
document.getElementById( "t2" ).style.border = "3px solid #FA8072"; 
} 
</script>

以上是如何以原生JavaScript修改CSS屬性程式碼範例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！