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

復制代碼 代碼如下:

div>歡迎光臨！</div>
<p><button>大小</button>
<button>顏色</button>
<button>背景</button>
<button>邊框</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>

盒子標簽和屬性對照

CSS語法（不區分大小寫）JavaScript語法（區分大小寫）

borderborder

border-bottomborderBottom

border-bottom-colorborderBottomColor

border-bottom-styleborderBottomStyle

border-bottom-widthborderBottomWidth

border-colorborderColor

border-leftborderLeft

border-left-colorborderLeftColor

border-left-styleborderLeftStyle

border-left-widthborderLeftWidth

border-rightborderRight

border-right-colorborderRightColor

border-right-styleborderRightStyle

border-right-widthborderRightWidth

border-styleborderStyle

border-topborderTop

border-top-colorborderTopColor

border-top-styleborderTopStyle

border-top-widthborderTopWidth

border-widthborderWidth

clearclear

floatfloatStyle

marginmargin

margin-bottommarginBottom

margin-leftmarginLeft

margin-rightmarginRight

margin-topmarginTop

paddingpadding

padding-bottompaddingBottom

padding-leftpaddingLeft

padding-rightpaddingRight

padding-toppaddingTop

顏色和背景標簽和屬性對照

CSS 語法（不區分大小寫）JavaScript 語法（區分大小寫）

backgroundbackground

background-attachmentbackgroundAttachment

background-colorbackgroundColor

background-imagebackgroundImage

background-positionbackgroundPosition

background-repeatbackgroundRepeat

colorcolor

樣式標簽和屬性對照

CSS語法（不區分大小寫）JavaScript 語法（區分大小寫）

displaydisplay

list-style-typelistStyleType

list-style-imagelistStyleImage

list-style-positionlistStylePosition

list-stylelistStyle

white-spacewhiteSpace

文字樣式標簽和屬性對照

CSS 語法（不區分大小寫）JavaScript 語法（區分大小寫）

fontfont

font-familyfontFamily

font-sizefontSize

font-stylefontStyle

font-variantfontVariant

font-weightfontWeight

文本標簽和屬性對照

CSS 語法（不區分大小寫）JavaScript 語法（區分大小寫）

letter-spacingletterSpacing

line-breaklineBreak

line-heightlineHeight

text-aligntextAlign

text-decorationtextDecoration

text-indenttextIndent

text-justifytextJustify

text-transformtextTransform

vertical-align

verticalAlign