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{width: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代码：

   

 1 window.onload=function(){
 2         function $(id){
 3             return typeof id ==="string"?document.getElementById(id):id}
 4             var links = $('menu').getElementsByTagName('p');
 5             var uls =$('menu').getElementsByTagName('ul');
 6            for(var i =0; i < links.length; i++){
 7                 links[i].index = i; //此处是全局作用域。此处需要思考
 8                 links[i].onclick = function(){
 9          
10             if (uls[this.index].style.display == "none") {//此处需要思考
11                 uls[this.index].style.display = "block";
12             }else{
13                 uls[this.index].style.display = "none";
14             }
15            
16               
17            }
18        }

这是我一开始写的代码，结果需要点击两次才能够正常的切换隐藏和显示。主要原因是因为这个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>属性等），这两种方法的使用还是能够解决这样的问题的。



 

posted on 2017-03-06 20:12  baoyadong  阅读(208)  评论(0)  编辑  收藏  举报

导航