js怎麼改變css屬性值

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

本教學操作環境：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樣式的標籤套用指定的樣式。

範例：

<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中的所有屬性是什麼

##border-bottom-styleborderBottomStyle邊框底部寬度borderBottomWidth邊框顏色#borderColor左框顏色左邊框左邊框顏色左邊框顏色border-left-styleborderLeftStyleborder-left-widthborderLeftWidthborder-rightborderRightborder-right-colorborderRightColor border-right -styleborderRightStyleborder-right-widthborderRightWidthborder-樣式borderStyleborder-topborderTopborder-top-color borderTopColorborder-top-styleborderTopStyle##border-top-width邊框寬度#clearfloatmargin##margin-bottommarginBottommargin-leftmarginLeftmargin-rightmarginRight margin-topmarginTop#paddingpadding# padding-bottompaddingBottompadding-leftpaddingLeft#- rightpaddingRightpadding-toppaddingTop顏色和背景標籤和屬性對照JavaScript 語法（區分大小寫） #backgroundbackgroundAttachment#backgroundColor背景圖像#背景位置背景重複顏色# # 樣式標籤與屬性對照CSS 語法（不區分大小寫）JavaScript 語法（區分大小寫）顯示顯示清單樣式類型listStyleType清單樣式圖片listStyleImage清單樣式位置listStylePositionlist-樣式#listStylewhite-spacewhiteSpace# 文字樣式標籤與屬性對照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
	##垂直對齊

【推薦學習：

javascript高階教學】

以上是js怎麼改變css屬性值的詳細內容。更多資訊請關注PHP中文網其他相關文章！