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代码:
*{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的小知识(二)的更多相关文章
- css样式学习小知识
1. 使用百分比设置宽高 自适用宽高的,有分割的区域,可以适用百分比:30% 70% 如果有一部分是固定的宽度或者高度,可以使用:height: calc( 100% - 36px ); 2. inp ...
- 自定义博客cnblogs样式的必备前端小知识——css
css样式相关小知识 文字超出一行显示省略号 overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis; /*文字隐藏后添加省略号*/ white-sp ...
- HTML+CSS中的一些小知识
今天分享一些HTML.CSS的小知识,希望能够对大家有所帮助! 1.解决网页乱码的问题:最重要的是要保证各个环节的字符编码一致! (1)编辑器的编辑环境的字符集(默认字符集):Crtl+U 常见的编码 ...
- 【前端词典】几个有益的 CSS 小知识
今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) ...
- 几个有益的 CSS 小知识
样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 ...
- 12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS ...
- 【C#小知识】C#中一些易混淆概念总结(二)--------构造函数,this关键字,部分类,枚举 分类: C# 2014-02-03 01:24 1576人阅读 评论(0) 收藏
目录: [C#小知识]C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用 继上篇对一些C#概念问题进行细节的剖析以后,收获颇多.以前,读书的时候,一句话一掠而 ...
- css进阶 05-CSS的一些小知识
05-CSS的一些小知识 #隐藏盒子的几种方式 隐藏盒子,有以下几种方式: (1)方式一: overflow:hidden; //隐藏盒子超出的部分 (2)方式二: display: none; ...
- Jquery:小知识;
Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器 上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理 ...
随机推荐
- 《DSP using MATLAB》Problem 8.10
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- Vue中的better-scroll插件
Vue中的better-scroll插件 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScrol ...
- 第一周课堂笔记5th
1. While循环机制 如何终止循环? 改变条件(根据上面的流程,只要改变条件,就会终止循环). 关键字:break. 调用系统命令:quit(),exit() 后面会讲到,不建议大家使用 ...
- php 7.2下mcrypt扩展支持附带的问题
按照网上提供的mcrypt扩展编译支持方法,完成了扩展编译,也确实可以正常加密/解密了 但是如果php.ini中配置为: error_reporting = E_ALL display_errors ...
- Nodejs之路(二)—— Nodejs再入门
一.在Node中使用模板引擎 js代码: // art-template不仅可以在浏览器使用,也可以在node中使用 // 1.安装 npm install art-temlate模板引擎 // 2. ...
- springboot 2+ druid
springboot 1+ druid druid 配置 import com.alibaba.druid.pool.DruidDataSource; import com.alibaba.druid ...
- 2019-5-21-C#-命令行如何静默调用-del-删除文件
title author date CreateTime categories C# 命令行如何静默调用 del 删除文件 lindexi 2019-05-21 11:32:28 +0800 2019 ...
- 安卓自定义View进阶-Canvas之画布操作 转载
安卓自定义View进阶-Canvas之画布操作 转载 https://www.gcssloop.com/customview/Canvas_Convert 本来想把画布操作放到后面部分的,但是发现很多 ...
- SyntaxError: Non-ASCII character ‘xe5’ in file 04.py on line 4, but no encoding declared
出现问题的原因:程序中的编码错误,python默认是acii模式,没有支持utf8,代码中需要输出汉字,所以报错. 解决办法:源代码文件第一行添加:#coding:utf-8 -- coding: U ...
- [转]用DateTime.ToString(string format)输出不同格式的日期
DateTime.ToString()函数有四个重载.一般用得多的就是不带参数的那个了.殊不知,DateTime.ToString(string format)功能更强大,能输出不同格式的日期.以下把 ...