Dom樣式編程,簡單的理解就是通過javascript來操作頁面元素的屬性,來改變頁面顯示效果。頁面中通過引入style對象來管理元素的css屬性。Dom也采用style對象來管理。
style對象包含與每個CSS樣式對應的特性,雖然格式不同,單個單詞的css樣式,以相同名字的特性來表示,但是style對象中,兩個單詞的樣式的表示方式是通過將第一個單詞加
上首字母大寫的第二個殘次,并且單詞間沒有橫杠。
下面列出了一些常用的CSS特性以及她們對應的javascript中style對象的表示
CSS樣式特性 javascript樣式特性
background-color style.backgroundColor
color style.color
font style.font
font-family style.fontFanmily
font-weight style.fontWeight
以上是舉了幾個簡單的例子。
<html>
<title>網(wǎng)站制作學習網(wǎng)</title>
<head>
<script language="javascript">
function forasp_cn()
{
var forasp_cn_div = document.getElementById("forasp_div");
alert("原來顏色是"+forasp_cn_div.style.backgroundColor+"\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)站制作學習網(wǎng)點擊看看</div>
</body>
</html>
style對象還有cssText特性,這個特性包含了所有描述元素樣式的CSS字符串。
用法:對象.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)先級priority來設置CSS特性propertyName的value值(priority的值可以為impertinent或者為空字符串)
更多信息請查看IT技術專欄