javascript之DOM技术（二）

全文链接

一。样式编程
1.页面中的每一个元素都具有一个style对象，此对象管理元素的CSS样式。这是在IE4.0引入的，后来作为DOM标准被接受。使用方法:
var oDiv=document.getElementById("div1");
alert(oDiv.style.backgroundColor);
style对象拥有一个cssText属性，返回描述元素样式的CSS字符串。

2.样式对象style的方法（IE6并不支持这些方法）：
（1）getPropertyValue(propertyName)——返回CSS特性propertName的字符串值，比如this.style.getPropertyValue("background-color");这里的propertyName必须按照CSS的样式定义。

（2）getPropertyPriority()——返回important字符串或者为空
（3）item(index)——返回给定索引处的CSS特性名称
（4）removeProperty(propertyName)——移除某CSS特性
（5）setProperty(propertyName,value,priorty)——按照执行优先级设定CSS特性的值

3.通过隐藏层实现自定义鼠标提示的例子：

< html >
< head >
< title > StyleExample </ title >
< script type ="text/javascript" src ="detect.js" ></ script >
< script type ="text/javascript" src ="eventutil.js" ></ script >
< script type ="text/javascript" >
function showTip(){
var oDiv = document.getElementById( " divTip1 " );
oDiv.style.visibility = " visible " ;
var oEvent = EventUtil.getEvent();
oDiv.style.left = oEvent.clientX + 5 ;
oDiv.style.top = oEvent.clientY + 5 ;
}

function hideTip(){
var oDiv = document.getElementById( " divTip1 " );
var oEvent = EventUtil.getEvent();
oDiv.style.visibility = " hidden " ;
}
</ script >
</ head >
< body >
< p > Moveyourmouseovertheredsquare. </ p >
< div id ="div1"
style ="background-color:red;height:50px;width:50px"
onmouseover ="showTip()" onmouseout ="hideTip()" ></ div >

< div id ="divTip1"
style ="background-color:yellow;position:absolute;visibility:hidden;padding:5px" >
< span style ="font-weight:bold" > CustomTooltip </ span >< br />
Moredetailscangohere.
</ div >
</ body >
</ html >

更多相关文章

随机推荐