Dom樣式編程,簡(jiǎn)單的理解就是通過(guò)javascript來(lái)操作頁(yè)面元素的屬性,來(lái)改變頁(yè)面顯示效果。頁(yè)面中通過(guò)引入style對(duì)象來(lái)管理元素的css屬性。Dom也采用style對(duì)象來(lái)管理。
style對(duì)象包含與每個(gè)CSS樣式對(duì)應(yīng)的特性,雖然格式不同,單個(gè)單詞的css樣式,以相同名字的特性來(lái)表示,但是style對(duì)象中,兩個(gè)單詞的樣式的表示方式是通過(guò)將第一個(gè)單詞加
上首字母大寫(xiě)的第二個(gè)殘次,并且單詞間沒(méi)有橫杠。
下面列出了一些常用的CSS特性以及她們對(duì)應(yīng)的javascript中style對(duì)象的表示
CSS樣式特性 javascript樣式特性
background-color style.backgroundColor
color style.color
font style.font
font-family style.fontFanmily
font-weight style.fontWeight
以上是舉了幾個(gè)簡(jiǎn)單的例子。
<html>
<title>網(wǎng)站制作學(xué)習(xí)網(wǎng)</title>
<head>
<script language="javascript">
function forasp_cn()
{
var forasp_cn_div = document.getElementById("forasp_div");
alert("原來(lái)顏色是"+forasp_cn_div.style.backgroundColor+"\n點(diǎn)擊后變?yōu)間reen");
forasp_cn_div.style.backgroundColor = "green";
}
</script>
</head>
<body>
<div id="forasp_div" style="background-color:red;" onclick= "forasp_cn();">網(wǎng)站制作學(xué)習(xí)網(wǎng)點(diǎn)擊看看</div>
</body>
</html>
style對(duì)象還有cssText特性,這個(gè)特性包含了所有描述元素樣式的CSS字符串。
用法:對(duì)象.style.cssText。這樣就獲取了全部的style的樣式內(nèi)容。
Dom樣式的方法
getPropertyValue(properyName)-返回CSS特性propertyName的字符串值。特性必須按照CSS樣式定義。例如"background-color"而不是"backgroundColor";
getPropertyPriority()-如果在規(guī)則中指定特性important,則返回important,否則返回空的字符串。
item(index)-返回在給定索引的index處的css特性的名稱,稱"background-color";
removeProperty(propertyName)-從CSS定義中刪除propertyName
setProperty(propertyName,value,priority)-按照指定的優(yōu)先級(jí)priority來(lái)設(shè)置CSS特性propertyName的value值(priority的值可以為impertinent或者為空字符串)
更多信息請(qǐng)查看IT技術(shù)專欄