DIV CSS 佈局教程網

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

1.用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>
<div id="tt">歡迎光臨！</div>
<p><button onclick="setClass()">更改樣式</button></p>
<script type="text/javascript">
function setClass()
{
document.getElementById( "tt" ).className = "txt";
}
</script>


2.用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屬性值。

舉例：

復制代碼 代碼如下:
div id="t2">歡迎光臨！</div>
<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>

方法:

document.getElementById("xx").style.xxx中的所有屬性是什麼

盒子標簽和屬性對照 CSS語法（不區分大小寫） JavaScript語法（區分大小寫） border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width borderBottomWidth border-color borderColor border-left borderLeft border-left-color borderLeftColor border-left-style borderLeftStyle border-left-width borderLeftWidth border-right borderRight border-right-color borderRightColor border-right-style borderRightStyle border-right-width borderRightWidth border-style borderStyle border-top borderTop border-top-color borderTopColor border-top-style borderTopStyle border-top-width borderTopWidth border-width borderWidth clear clear float floatStyle margin margin margin-bottom marginBottom margin-left marginLeft margin-right marginRight margin-top marginTop padding padding padding-bottom paddingBottom padding-left paddingLeft padding-right paddingRight padding-top paddingTop 顏色和背景標簽和屬性對照 CSS 語法（不區分大小寫） JavaScript 語法（區分大小寫） background background background-attachment backgroundAttachment background-color backgroundColor background-image backgroundImage background-position backgroundPosition background-repeat backgroundRepeat color color   樣式標簽和屬性對照 CSS語法（不區分大小寫） JavaScript 語法（區分大小寫） display display list-style-type listStyleType list-style-image listStyleImage list-style-position listStylePosition list-style listStyle white-space whiteSpace   文字樣式標簽和屬性對照 CSS 語法（不區分大小寫） JavaScript 語法（區分大小寫） font font font-family fontFamily font-size fontSize font-style fontStyle font-variant fontVariant font-weight fontWeight   文本標簽和屬性對照 CSS 語法（不區分大小寫） JavaScript 語法（區分大小寫） letter-spacing letterSpacing line-break lineBreak line-height lineHeight text-align textAlign text-decoration textDecoration text-indent textIndent text-justify textJustify text-transform textTransform vertical-align

verticalAlign