DOM(三)CSS DOM 编程

1. IE4.0为 每一个Web页面元素引入了一个style对象来管理元素的css样式，最后被DOM沿用至今
2. 改变border line的代码

var  oDiv  =  document.getElementById( " div1 " );
oDiv.style.border  =  " 1px solid black " ;

3. 通过下面的代码，可以实现hover的效果

< div  id ="div1"  onmouseover ="this.style.backgroundColor='blue'"  onmouseout ="this.style.backgroundColor='red'" >

4. style对象有一些方法,这些是DOM标准里面有的，但是IE不支持，所以最好还是直接使用style的属性,如：style.backgroundColor的形式来设置style的property值比较好。
    style.getPropertyValue(propertyName);
    style.getPropertyPriority();
    style.item(index);
    style.removeProperty(propertyName);
    style.setProperty(propertyName, value, privority);
5. Copy下面的内容到txt文件，然后改后缀为.htm，用IE打开，可以看到一个黄色的Tip，主要原理是操作style.Visibility属性，这个属性和style.display是不一样的，前者只是控制visible，不会影响布局，后者不仅仅控制visible，还会影响布局。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
    < head >
        < title > Style Example </ title >
        < script  type ="text/ecmascript" >
            function showTip(oEvent)
            {
                var oDiv = document.getElementById("divTip1");
                oDiv.style.visibility = "visible";
                oDiv.style.left = oEvent.clientX + 5;
                oDiv.style.top = oEvent.clientY + 5;
            }
            function hideTip(oEvent)
            {
                var oDiv = document.getElementById("divTip1");
                oDiv.style.visibility = "hidden";
            }
        </ script >
    </ head >
    < body >
       < p >
            Move your mouse over the red square.
        </ p >

        < div
            id ="div1"
            style ="background-color: red; height: 50px; width:50px"
            onmouseover ="showTip(window.event)"  onmouseout ="hideTip(window.event)" >
        </ div >

        < div
            id ="divTip1"
            style ="background-color: Yellow; position:absolute;visibility:hidden;padding:5px" >

            < span  style ="font-weight:bold" >
                Custom Tooltip
            </ span >

            < br />
                More details can go here.

        </ div >
    </ body >
</ html >

6. 下面代码利用style的display属性控制折叠功能

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
     < head >
         < title > Toggle Example </ title >
         < script  type ="text/ecmascript" >
            function toggle(sDivId)
            {
                var oDiv = document.getElementById(sDivId);
                oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none";
            }
         </ script >
     </ head >
     < body >
         < div
             style =" background-color:Blue; color:white;font-weight:bold;padding:10px;cursor:pointer"
            onclick ="toggle('divContent1')" >
            Click here.
         </ div >
        
         < div
             id ="divContent1"  
            style ="border:3px solid blue; height:100px; padding:10px" >
            This is some content to show and hide.
         </ div >
        
         < p > &nbsp; </ p >
        
         < div
             style ="background-color:Blue; color:White; font-weight:bold; padding:10px; cursor:pointer"
            onclick ="toggle('divContent2')" >
            Click here
         </ div >
         < div
             id ="divContent2"
            style ="border: 3px solid blue; height:10px; padding:10px" >
            This is some content to show and hide.
         </ div >
     </ body >
</ html >

6. 有些元素通过设置class属性来设置样式，我们可以通过 document.styleSheets集合拿到当前文档所有的css class。如果修改css class的设置，将影响所有的使用这个css class的元素。
    DOM中可以使用 document.styleSheets[0].cssRulers ,但是IE中对应的属性叫 document.styleSheets[0].rulers
7. 我们可以为一个element设置style，也可以给它的父Element设置style，还可以设置css class，最后我们在浏览器看到的效果是所有这些设置的合并，IE提供或者最后看到的style的属性是 element.currentStyle，它是只读的。DOM提供的是一个方法,可以通过 document.defaultView.getComputedStyle(element, hover)获得，第一个参数是元素， 第二个参数是伪类：:hover,:first-letter.

转载于:https://www.cnblogs.com/joeliu/archive/2008/01/22/1048980.html