关于display:none;和id特性的一些需要注意的地方
关注点一：
display:none;一旦用于某个元素，那个这个元素在页面中就不再占据位置。
visibility:hidden;用于某个元素时，这个元素还会占据位置。
关注点二：
即使使用了display:none;只是在dom树中其不再显示了，但是，文件中还有这个元素（废话！）。
关注点三：
我们知道一旦某一个元素拥有id特性，那么这个id名就会成为全局变量被调用，值得注意的是，这个id只能有一个！ 如果一个页面中有两个id，那么我们直接使用id名称并关联事件时，将不再生效（这时可以根据控制台的地址此时的button为undefined）。如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF8">
<title>获取验证码的倒计时</title>
<style>
.first_button{
background-color: red;
}
</style>
</head>
<body>
<button id="button" class="first_button">这是第一个</button>
<button id="button">这是第二个</button>
<script>
button.onclick = function () {
alert("d");
}
</script>
</body>
</html>
关键点四：
在上述观点下，我们需要知道，如果使用document.getElementBtId()就可以获取到元素，但永远只能获取到第一个。
关注点五：
上述代码显然不能alert。但是也别天真地以为只要你将其中一个元素display:none；就可以！！ 因为document.getElementById()方法从dom中获取元素中才不会理你的display特性呢！ 而是只能获取其中的一个，结果就是还是不行，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF8">
<title>获取验证码的倒计时</title>
<style>
.first_button{
display: none;
}
</style>
</head>
<body>
<button id="button" class="first_button">这是第一个</button>
<button id="button">这是第二个</button>
<script>
var button = document.getElementById("button");
console.log(button.className);
</script>
</body>
</html>
总结：如果页面比较复杂，尽量不要直接使用id作为全局变量来调用，以防止出错（即一个都获取不到）， document.getElementById还可以获取到一个呢！！
关于display:none;和id特性的一些需要注意的地方的更多相关文章
- id特性
每一个HTML元素都可以附带id特性,id特 <!DOCTYPE html> <!-- To change this license header, choose License H ...
- 需要使用id内省方法--responsesToSelector: 的两个地方
第一个: 当从数组中取出对象,并且需要执行某个方法时,最好使用responsesToSelector:判断该对象是否可以 执行该方法.因为在OC数组中,取出的对象都是 id 类型的. 第二个: 在MV ...
- position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
这是寒冬大神提出的一个题目,刚开始看到这题的时候完全不知道从什么地方回答起好,题目内容比较广泛,找不到针对点.后来我觉得这个题目应该能拆成几个点来回答:1.'display'.'position' 和 ...
- Jquery 设置style:display 通过ID隐藏区域
$("#id").css('display','none'); $("#id").css('display','block'); 或 $("#id&q ...
- 2012 T-SQL 新特性 and O2O项目
SQL Server 2012 T-SQL 新特性 NoSQL之HBase 9月初淘宝飞芃做了一个关于HBase的分享,讲的激情飞扬,让听众收益匪浅,现做下简单总结. HBase是一个NoSQL数 ...
- 「小程序JAVA实战」小程序视图之细说wx：key列表高级特性（16）
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-16/ wx:key的高级特性.这个很重要,因为在app上经常有上拉,下拉加载,我们如果不使用这个特 ...
- 从PowerDesigner表字段的Name到EF实体类属性的Display Name（根据PowerDesigner生成EF实体类中文注释和验证元数据）
第一步:将PowerDesigner表字段的中文Name填入Comment中:工具-Execute Commands-Edit/Run Script... '********************* ...
- 从append追加的<tr>里传ID参数给js函数
今天这个小问题几乎把我整崩溃 $.each(data.list, function (index, item) { i++; shenhe = "待审核"; tixing = it ...
- 被废了的display:box弹性盒模型
这几天在研究弹性布局,看书中写的是display:box,结果在chrome浏览器中是正常的,想着移动端大部分浏览器也是webkit内核的应该也没啥问题,结果确实没问题,但仔细一看,高度呢?好吧,严重 ...
随机推荐
- opencv常用函数备忘
//显示图片 IplImage * src = cvLoadImage("xx.JPG"); cvNamedWindow(); cvShowImage("show_ima ...
- 编写高质量代码改善C#程序的157个建议——建议138：事件和委托变量使用动词或形容词短语命名
建议138:事件和委托变量使用动词或形容词短语命名 事件和委托使用场景是调用某个方法,只不过这个方法由调用者赋值.这决定了对应的变量应该以动词或形容词短语命名. 关于事件和委托变量妥当的命名示例如下: ...
- （转载）get和 post方法的不同
HTTP的Get/Post请求区别归纳 1. get是从服务器上获取数据,post是向服务器传送数据.g et 和 post只是一种传递数据的方式,get也可以把数据传到服务器,他们的本质都是发送请求 ...
- Java的sun.misc.Unsafe类
阅读目录 前言 Unsafe类的作用 获取Unsafe对象 Unsafe类中的API 前言 以下sun.misc.Unsafe源码和demo基于jdk1.7: 最近在看J.U.C里的源码,很多都用到了 ...
- 【小梅哥SOPC学习笔记】Altera SOPC嵌入式系统设计教程
Altera SOPC嵌入式系统设计教程 第1章 概述 SOPC(System On Programmable Chip,可编程的片上系统)是Altera公司提出来的一种灵活.高效的SOC解决方案.它 ...
- 7、Semantic-UI之图标与按钮组
7.1 图标按钮 Semantic-UI中可以定义一组图标样式,并且可以在按钮中使用图标. 示例:定义一个图标按钮 <button class="ui black button&q ...
- stderr和stdout(printf、fprintf、sprintf)(转)
本文转自:http://www.cnblogs.com/zhangyabin---acm/p/3203745.html 先区分一下:printf,sprintf,fprintf. 1,printf就是 ...
- webservice 创建及调用
1.创建一个空白项目 2.在此项目上新建项--添加一个web服务 (.asmx) 这样就创建好了一个webservice --------------------------------------- ...
- Windows 2012 R2版本下部署IIS网站
Windows 2012 R2是一个比较稳定的服务器版本,本文分享一篇在Windows 2012 R2版本下搭建IIS项目的操作流程. 1. 安装IIS Web服务器 打开远程桌面->控制面板- ...
- SDOI2013直径（树的直径）
题目描述: 点这里 题目大意: 就是在一个树上找其直径的长度是多少,以及有多少条边满足所有的直径都经过该边. 题解: 首先,第一问很好求,两边dfs就行了,第一次从任一点找距它最远的点,再从这个点找距 ...