关注点一：

　　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特性的一些需要注意的地方的更多相关文章

  1. id特性

    每一个HTML元素都可以附带id特性,id特 <!DOCTYPE html> <!-- To change this license header, choose License H ...

  2. 需要使用id内省方法--responsesToSelector: 的两个地方

    第一个: 当从数组中取出对象,并且需要执行某个方法时,最好使用responsesToSelector:判断该对象是否可以 执行该方法.因为在OC数组中,取出的对象都是 id 类型的. 第二个: 在MV ...

  3. position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

    这是寒冬大神提出的一个题目,刚开始看到这题的时候完全不知道从什么地方回答起好,题目内容比较广泛,找不到针对点.后来我觉得这个题目应该能拆成几个点来回答:1.'display'.'position' 和 ...

  4. Jquery 设置style:display 通过ID隐藏区域

    $("#id").css('display','none'); $("#id").css('display','block'); 或 $("#id&q ...

  5. 2012 T-SQL 新特性 and O2O项目

    SQL Server 2012 T-SQL 新特性 NoSQL之HBase   9月初淘宝飞芃做了一个关于HBase的分享,讲的激情飞扬,让听众收益匪浅,现做下简单总结. HBase是一个NoSQL数 ...

  6. 「小程序JAVA实战」小程序视图之细说wx：key列表高级特性（16）

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-16/ wx:key的高级特性.这个很重要,因为在app上经常有上拉,下拉加载,我们如果不使用这个特 ...

  7. 从PowerDesigner表字段的Name到EF实体类属性的Display Name（根据PowerDesigner生成EF实体类中文注释和验证元数据）

    第一步:将PowerDesigner表字段的中文Name填入Comment中:工具-Execute Commands-Edit/Run Script... '********************* ...

  8. 从append追加的<tr>里传ID参数给js函数

    今天这个小问题几乎把我整崩溃 $.each(data.list, function (index, item) { i++; shenhe = "待审核"; tixing = it ...

  9. 被废了的display:box弹性盒模型

    这几天在研究弹性布局,看书中写的是display:box,结果在chrome浏览器中是正常的,想着移动端大部分浏览器也是webkit内核的应该也没啥问题,结果确实没问题,但仔细一看,高度呢?好吧,严重 ...

随机推荐

  1. sql五大类中的 DTL 数据事务语言

    DTL,数据事务语言 事务的定义:就是指一组相关的SQL操作,我们所有的操作都是事务中的. 注意:在数据库中,执行业务的基本单位是[事务],不是以某一条SQL.    数据库在默认情况下,事务是都打开 ...

  2. 【Linux】Linux各文件夹说明

    转载 /bin/ — 用来贮存普通命令. /sbin/ — 许多系统命令(例如 shutdown)的贮存位置.属于基本的系统命令,如shutdown,reboot,用于启动系统,修复系统./sbin目 ...

  3. SpringCloud 教程 | 第一篇： 服务的注册与发现Eureka(Finchley版本)

    一.spring cloud简介 鉴于<史上最简单的Spring Cloud教程>很受读者欢迎,再次我特意升级了一下版本,目前支持的版本为Spring Boot版本2.0.3.RELEAS ...

  4. 介绍自己以及github注册流程

    我叫何季生,来自网络工程141,学号是1413042027,我喜欢看一些动漫和游戏,对于编程并不是很厉害希望今年能够有所突破. github注册流程:在刚开始注册github时,我用的是qq浏览器,却 ...

  5. T-SQL逻辑查询

    理解T-SQL的逻辑查询顺序是学习SQL Server的基础. T-SQL逻辑执行顺序 (8)    SELECT (9) DISTINCT (11) <TOP_specification> ...

  6. docker+selenium grid解决node执行经常卡死

    执行用例时出现下图: 可以在启动node节点容器时添加如下红色字体的参数 docker run -d -p 5903:5900 --shm-size=512m --link selenium_hub: ...

  7. 「HNOI 2013」消毒

    题目链接 戳我 \(Solution\) 我们首先想一想如果这一题只是二维的该怎么办? 就是一个最小点覆盖问题.这里就不详细解释了,用网络流或匈牙利都无所谓. 但现在是三维的,那么现在该如何处理呢? ...

  8. 忽略warning 警告

    1

  9. lua 5.3 英文手册 google机器翻译版

    LUA Lua 5.3参考手册作者:Roberto Ierusalimschy,Luiz Henrique de Figueiredo,Waldemar Celes 版权所有©2015-2018 Lu ...

  10. jqury表单验证

    结合天天生鲜的用户注册页面,学习验证表单js register.js--表单验证源码 $(function(){ var error_name = false; var error_password ...