js怎麼改變css屬性值-js教程-PHP中文網

改變css屬性值的方法：1、使用「document.getElementById(id值).className=字串;」語句修改；2、使用「document.getElementById(id值).style.屬性名=值;”語句修改。

js怎麼改變css屬性值

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

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

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

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

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

登入後複製

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

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

範例：

欢迎光临！

登入後複製

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

範例：

欢迎光临！

登入後複製

方法：

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

##border-bottom-style borderBottomStyle 邊框底部寬度 borderBottomWidth 邊框顏色 #borderColor 左框顏色左邊框左邊框顏色左邊框顏色 border-left-style borderLeftStyle border-left-width borderLeftWidth border-right borderRight border-right-color borderRightColor border-right -style borderRightStyle border-right-width borderRightWidth border-樣式 borderStyle border-top borderTop border-top-color borderTopColor border-top-style borderTopStyle ##border-top-width 邊框寬度 #clear float margin ##margin-bottom marginBottom margin-left marginLeft margin-right marginRight margin-top marginTop #padding padding # padding-bottom paddingBottom padding-left paddingLeft #- right paddingRight padding-top paddingTop 顏色和背景標籤和屬性對照 JavaScript 語法（區分大小寫） #background backgroundAttachment #backgroundColor 背景圖像 #背景位置背景重複顏色 # # 樣式標籤與屬性對照 CSS 語法（不區分大小寫） JavaScript 語法（區分大小寫）顯示顯示清單樣式類型 listStyleType 清單樣式圖片 listStyleImage 清單樣式位置 listStylePosition list-樣式 #listStyle white-space whiteSpace # 文字樣式標籤與屬性對照 CSS語法（不區分大小寫） JavaScript語法（區分大小寫） #字體字體字體系列字體系列 #字體大小字體大小字體樣式字體樣式字體變體 fontVariant ##文字變換文字變換垂直對齊

方塊標籤與屬性對照
#CSS語法（不區分大小寫）	JavaScript語法（大小寫）
border	#border
border-bottom	borderBottom
border-bottom-color	#borderBottomColor















borderTopWidth
borderWidth
clear
floatStyle
margin









##CSS 語法（不區分大小寫）
	背景
	background-attachment
	#background-color
	#背景圖像
	背景位置
	背景重複
	顏色


















##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

	##垂直對齊