共计 3590 个字符，预计需要花费 9 分钟才能阅读完成。
写在开篇
哈喽！我又来写”水文“了，回顾上篇讲到的 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…
