用JavaScript修改CSS屬性的代碼

2019-11-20 22:44:54

字體：大中小

供稿：網(wǎng)友

用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語法（不區(qū)分大小寫）	JavaScript語法（區(qū)分大小寫）
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 語法（不區(qū)分大小寫）	JavaScript 語法（區(qū)分大小寫）
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
color	color

樣式標簽和屬性對照
CSS語法（不區(qū)分大小寫）	JavaScript 語法（區(qū)分大小寫）
display	display
list-style-type	listStyleType
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style	listStyle
white-space	whiteSpace

文字樣式標簽和屬性對照
CSS 語法（不區(qū)分大小寫）	JavaScript 語法（區(qū)分大小寫）
font	font
font-family	fontFamily
font-size	fontSize
font-style	fontStyle
font-variant	fontVariant
font-weight	fontWeight

文本標簽和屬性對照
CSS 語法（不區(qū)分大小寫）	JavaScript 語法（區(qū)分大小寫）
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