上篇文章说到,通过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代码:

 *{margin:;padding:;font-size:13px;list-style:none;}
.menu{width:210px;margin:50px auto;border:1px solid #ccc;}
.menu p{height:25px;line-height:25px;font-weight:bold; background:#eee;
border-bottom:1px solid #ccc;cursor:pointer; padding-left:5px;}
.menu div ul{display:none;}
.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>属性等),这两种方法的使用还是能够解决这样的问题的。

CSS-DOM的小知识(二)的更多相关文章

  1. css样式学习小知识

    1. 使用百分比设置宽高 自适用宽高的,有分割的区域,可以适用百分比:30% 70% 如果有一部分是固定的宽度或者高度,可以使用:height: calc( 100% - 36px ); 2. inp ...

  2. 自定义博客cnblogs样式的必备前端小知识——css

    css样式相关小知识 文字超出一行显示省略号 overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis; /*文字隐藏后添加省略号*/ white-sp ...

  3. HTML+CSS中的一些小知识

    今天分享一些HTML.CSS的小知识,希望能够对大家有所帮助! 1.解决网页乱码的问题:最重要的是要保证各个环节的字符编码一致! (1)编辑器的编辑环境的字符集(默认字符集):Crtl+U 常见的编码 ...

  4. 【前端词典】几个有益的 CSS 小知识

    今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码:   HTML 代码:   记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) ...

  5. 几个有益的 CSS 小知识

    样式的顺序 CSS 代码:   HTML 代码:   记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 ...

  6. 12个你未必知道的CSS小知识

    虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS ...

  7. 【C#小知识】C#中一些易混淆概念总结(二)--------构造函数,this关键字,部分类,枚举 分类: C# 2014-02-03 01:24 1576人阅读 评论(0) 收藏

    目录: [C#小知识]C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用 继上篇对一些C#概念问题进行细节的剖析以后,收获颇多.以前,读书的时候,一句话一掠而 ...

  8. css进阶 05-CSS的一些小知识

    05-CSS的一些小知识 #隐藏盒子的几种方式 隐藏盒子,有以下几种方式: (1)方式一: overflow:hidden; //隐藏盒子超出的部分   (2)方式二: display: none; ...

  9. Jquery:小知识;

    Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器   上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理 ...

随机推荐

  1. 《DSP using MATLAB》Problem 8.10

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  2. Vue中的better-scroll插件

    Vue中的better-scroll插件 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScrol ...

  3. 第一周课堂笔记5th

    1.      While循环机制 如何终止循环? 改变条件(根据上面的流程,只要改变条件,就会终止循环). 关键字:break. 调用系统命令:quit(),exit() 后面会讲到,不建议大家使用 ...

  4. php 7.2下mcrypt扩展支持附带的问题

    按照网上提供的mcrypt扩展编译支持方法,完成了扩展编译,也确实可以正常加密/解密了 但是如果php.ini中配置为: error_reporting = E_ALL display_errors ...

  5. Nodejs之路(二)—— Nodejs再入门

    一.在Node中使用模板引擎 js代码: // art-template不仅可以在浏览器使用,也可以在node中使用 // 1.安装 npm install art-temlate模板引擎 // 2. ...

  6. springboot 2+ druid

    springboot 1+ druid druid 配置 import com.alibaba.druid.pool.DruidDataSource; import com.alibaba.druid ...

  7. 2019-5-21-C#-命令行如何静默调用-del-删除文件

    title author date CreateTime categories C# 命令行如何静默调用 del 删除文件 lindexi 2019-05-21 11:32:28 +0800 2019 ...

  8. 安卓自定义View进阶-Canvas之画布操作 转载

    安卓自定义View进阶-Canvas之画布操作 转载 https://www.gcssloop.com/customview/Canvas_Convert 本来想把画布操作放到后面部分的,但是发现很多 ...

  9. SyntaxError: Non-ASCII character ‘xe5’ in file 04.py on line 4, but no encoding declared

    出现问题的原因:程序中的编码错误,python默认是acii模式,没有支持utf8,代码中需要输出汉字,所以报错. 解决办法:源代码文件第一行添加:#coding:utf-8 -- coding: U ...

  10. [转]用DateTime.ToString(string format)输出不同格式的日期

    DateTime.ToString()函数有四个重载.一般用得多的就是不带参数的那个了.殊不知,DateTime.ToString(string format)功能更强大,能输出不同格式的日期.以下把 ...