写在开篇

哈喽！我又来写”水文“了，回顾上篇讲到的class属性，那么class属性和本篇要讲的id属性有什么不一样呢？追随笔者步调，一一解剖。

HTML中的id属性

间接先上个例子，看看成果，而后咱们逐个分析一下。看上面代码：
<!DOCTYPE html><html lang="zh">    <head>        <meta charset="UTF-8">        <title>陪你温习坚固，攻破前端技能</title>        <style>            #id1 {                  background-color: lightblue;                  color: black;                  padding: 40px;                  text-align: center;            }            #id2 {                  background-color: lightcoral;                  color: white;                  padding: 30px;                  text-align: center;            }        </style>    </head>    <body>        <h2 id="id1">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>        <p id="id2">咱们会继续分享运维和运维开发畛域相干的技术文章</p>    </body></html>

在下面的例子中，h2元素和p元素都通过id属性来作为HTML元素的惟一ID，援用元素ID属性的语法是在后面减少#号，留神到style标签了嘛？通过#id1和#id2来为h2和p元素设置了CSS属性呢。须要留神，id属性的值在，在HTML文档中必须是惟一的，并且它是对大小写敏感的，这个要留神哦！

Class属性和ID属性的区别

在上次的分享中，咱们讲到了class属性，那么它跟id属性有啥区别呢？简而言之就是class是可共享的，id是惟一的。怎么说呢？也就是说同一个类名能够由多个HTML元素应用，而一个id名称只能由页面中的一个HTML元素应用。

上面咱们来看小栗子，将id的名称设置为一样，看看会有啥奇怪的景象。代码如下：

<!DOCTYPE html><html lang="zh">    <head>        <meta charset="UTF-8">        <title>陪你温习坚固，攻破前端技能</title>        <style>            #id1 {                  background-color: lightblue;                  color: black;                  padding: 40px;                  text-align: center;            }            #id1 {                  background-color: lightcoral;                  color: white;                  padding: 30px;                  text-align: center;            }        </style>    </head>    <body>        <h2 id="id1">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>        <p id="id1">咱们会继续分享运维和运维开发畛域相干的技术文章</p>    </body></html>

效果图如下：

有发现到下面的问题嘛？有啥奇怪景象呢？景象就是在style中的第1个#id1的CSS款式属性没有失效，第2个#id1的CSS款式是失效了的。

咱们再看一个例子比照一下

<!DOCTYPE html><html lang="zh">    <head>        <meta charset="UTF-8">        <title>陪你温习坚固，攻破前端技能</title>        <style>            .cls {                  background-color: lightblue;                  color: black;                  padding: 40px;                  text-align: center;            }            .cls {                  background-color: sandybrown;                  color: white;                  padding: 30px;                  text-align: center;            }            #id1 {                  background-color: blueviolet;                  color: white;                  padding: 30px;                  text-align: center;            }            #id1 {                  background-color: lightgreen;                  color: white;                  padding: 30px;                  text-align: center;            }        </style>    </head>    <body>        <h1 class="cls">彩虹运维技术栈社区，公众号ID：TtrOpsStack</h1>        <h2 class="cls">诚邀您的关注！</h2>        <h3 id="id1">咱们会继续分享运维和运维开发畛域相干的技术文章</h3>        <h3 id="id1">您的关注，就是咱们保持最大的能源</h3>    </body></html>

成果如下图：

看效果图如同没啥故障，但看上面的正告信息：

HTML书签

html书签有什么用？当用书签之后，就会跳转到网页特定局部的内容。如果页面比拟长，这个书签的性能就显得很有用了，比方跳到最初，回到最前。那么这个所谓的书签是如何实现的呢？是通过ID和链接来实现的，上面咱们通过实战来分析一下具体的用法。

看上面的小栗子：

<!DOCTYPE html><html lang="zh">    <head>        <meta charset="UTF-8">        <title>运维开发工程师，攻破前端技能。</title>    </head>    <body>        <a href="#ym11">跳到最初</a>        <h1 id="ym1">彩虹运维技术栈社区1，公众号ID：TtrOpsStack</h1>        <p>诚邀您的关注，咱们会继续分享运维和运维开发畛域的技术文章</p>        <h1>彩虹运维技术栈社区2，公众号ID：TtrOpsStack</h1>        <p>诚邀您的关注，咱们会继续分享运维和运维开发畛域的技术文章</p>        <h1>彩虹运维技术栈社区3，公众号ID：TtrOpsStack</h1>        <p>诚邀您的关注，咱们会继续分享运维和运维开发畛域的技术文章</p>        <h1>彩虹运维技术栈社区4，公众号ID：TtrOpsStack</h1>        <p>诚邀您的关注，咱们会继续分享运维和运维开发畛域的技术文章</p>        <h1>彩虹运维技术栈社区5，公众号ID：TtrOpsStack</h1>        <p>诚邀您的关注，咱们会继续分享运维和运维开发畛域的技术文章</p>        <h1>彩虹运维技术栈社区6，公众号ID：TtrOpsStack</h1>        <p>诚邀您的关注，咱们会继续分享运维和运维开发畛域的技术文章</p>        <h1>彩虹运维技术栈社区7，公众号ID：TtrOpsStack</h1>        <p>诚邀您的关注，咱们会继续分享运维和运维开发畛域的技术文章</p>        <h1>彩虹运维技术栈社区8，公众号ID：TtrOpsStack</h1>        <p>诚邀您的关注，咱们会继续分享运维和运维开发畛域的技术文章</p>        <h1>彩虹运维技术栈社区9，公众号ID：TtrOpsStack</h1>        <p>诚邀您的关注，咱们会继续分享运维和运维开发畛域的技术文章</p>        <h1>彩虹运维技术栈社区10，公众号ID：TtrOpsStack</h1>        <p>诚邀您的关注，咱们会继续分享运维和运维开发畛域的技术文章</p>        <h1 id="ym11">彩虹运维技术栈社区11，公众号ID：TtrOpsStack</h1>        <p>诚邀您的关注，咱们会继续分享运维和运维开发畛域的技术文章</p>        <a href="#ym1">回到最前</a>    </body></html>

下面的例子中，当点击跳到最初，就能够看到成果了，不信您试试。嘿嘿！

在JavaScript中如何应用id属性？

上次咱们class属性的时候，也有讲到js如何应用class属性。这次呢，咱们讲讲js是如何应用id属性的。

咱们先看小栗子，代码如下：

<!DOCTYPE html><html lang="zh">    <head>        <meta charset="UTF-8">        <title>运维开发工程师，攻破前端技能。</title>    </head>    <body>        <h1 id="WeChatPublicID">点击查看彩虹运维技术栈社区的微信公众号</h1>        <button onclick="dis_wechat_public_id()">速度点击查看</button>        <script>            function dis_wechat_public_id() {                document.getElementById("WeChatPublicID").innerHTML = "微信公众号ID：TtrOpsStack"            }        </script>    </body></html>
上面，咱们看看点击前和点击后的成果

点击前：

点击后：

在上述代码中，次要通过getElementById办法来获取元素id，对于js的应用，笔者后续会专门分享该专题。

写在最初

好了，因笔者工夫和精力有限，本篇的分享就到此为止啦！心愿本文能帮忙到有须要的敌人。望多多关注咱们，点赞，珍藏、转发！

本文转载于（喜爱的盆友关注咱们）：
https://mp.weixin.qq.com/s/RI...