CSS-DOM的小知识(二)

CSS-DOM的小知识(二)

 

      上篇文章说到，通过element.style.property可以获得元素的样式，但是style属性只能够返回内嵌样式，对于外部样式表的样式和head中的style样式都无法获取，这就限制了此方法的使用。

      这几天做了一个实际的例子，感觉可以拿出来讲讲，填补一下这方面的知识的空白。最终的效果是这样的：

HTML代码如下：

<div class="menu" id="menu">
        <div>
            <p>Web前端</p>
            <ul>
                <li>JavaScript</li>
                <li>DIV+CSS</li>
                <li>jQuery</li>
            </ul>
        </div>
        <div>
            <p>后台脚本</p>
            <ul>
                <li>PHP</li>
                <li>ASP.net</li>
                <li>JSP</li>
            </ul>
        </div>
        <div>
            <p>前端框架</p>
            <ul>
                <li>Extjs</li>
                <li>Esspress</li>
                <li>YUI</li>
            </ul>
        </div>
    </div>

　　

CSS代码：

1 *{margin:0;padding:0;font-size:13px;list-style:none;}
2     .menu{210px;margin:50px auto;border:1px solid #ccc;}
3     .menu p{height:25px;line-height:25px;font-weight:bold; background:#eee;
4         border-bottom:1px solid #ccc;cursor:pointer; padding-left:5px;}
5     .menu div ul{display:none;}
6     .menu li{height:24px;line-height:24px;padding-left:5px;}

　　JS代码：

window.onload=function(){
        function $(id){
            return typeof id ==="string"?document.getElementById(id):id}
            var links = $('menu').getElementsByTagName('p');
            var uls =$('menu').getElementsByTagName('ul');
           for(var i =0; i < links.length; i++){
                links[i].index = i; //此处是全局作用域。此处需要思考
                links[i].onclick = function(){
         
            if (uls[this.index].style.display == "none") {//此处需要思考
                uls[this.index].style.display = "block";
            }else{
                uls[this.index].style.display = "none";
            }
           
              
           }
       }

　　

这是我一开始写的代码，结果需要点击两次才能够正常的切换隐藏和显示。主要原因是因为这个element.style属性：

element.style只能获取和设置元素style属性中的CSS样式，假如一开始元素无 style property，自然对应element.style里面的属性是空字符串，所以第一次点击才会直接设置到element.style.display = 'none'，点击第二次切换到element.style.display = 'block'。这是需要点击两次才能够正常切换的原因。

这里的话，有两种方法可供参考：

1.直接在else的分支上设置block，这样第一次点击就显示。这种方法比较投机取巧。

2,直接获取style中的display：none样式，这时候就需要获取计算后的样式，可以用getComputedStyle和IE上的ele.currentStyle。

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。而currentStyle是IE浏览器自娱自乐的一个属性，其与element.style可以说是近亲，至少在使用形式上类似，element.currentStyle，差别在于element.currentStyle返回的是元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的<style>属性等），这两种方法的使用还是能够解决这样的问题的。