用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中文網其他相關文章！
