高级DOM

 

< html >
     < head >
         < title > advanced dom study </ title >
         < style type = " text/css " >
            div.special
             ... {
                background-color:red;
                height:10px;
                width:10px;
                margin:10px;
            }
         </ style >
         < script type = " text/javascript " >
         function  sayStyle()
         ... {
            var oDiv = document.getElementById("div1");
            alert(oDiv.style.backgroundColor);
        }

         // DOM操作样式的方法
         // getPropertyValue(propertyName),getPropertyPriority(),item(index),
         // removeProperty(propertyName),setProperty(propertyName,value,priority)
         function  useMethods()
         ... {
            var oDiv = document.getElementById("div1");
            alert(oDiv.style.item(0));
            alert(oDiv.style.getPropertyValue("background-color"));
            alert(oDiv.style.removeProperty("background-color"));
            oDiv.style.setProperty("background-color",'red','important');
        }
         // IE不支持ＤＯＭ的style方法，因此，最好直接使用style对象的特性来获取和设置css的特性

         // 自定义鼠标属性：通常用title属性来设置
         function  getBackgroundColor()
         ... {
            var oCSSRules = document.styleSheets[0].cssRules||document.styleSheets[0].rules;

            oCSSRules[0].style.backgroundColor= "blue";
        }
         // 微软为每个元素提供一个currentStyle对象，它包含有元素的所有的style对象的特性和任何未被覆盖的ＣＳＳ规则的style特性，
         // currentStyle对象与style对象的使用方式完全一样，特性和方法都一样．


         // innerText,innerHTML都是针对IE的，为了更方便的操作DOM，对于Ｍozilla，只支持innerHTML
         </ script >
     </ head >
     < body >
         < div id = " div1 "  style = " background-color:red;height:50px;width:50px "  
                       onmouseover = " this.style.backgroundColor ='blue' "
                       onmouseout = " this.style.backgroundColor ='red' " ></ div >
         < br />
         < input type = " button "  value = " Get Background Color "  onClick = " getBackgroundColor(); " />
     </ body >
</ html >