一篇”水文“带你解剖HTML中的ID属性以及和Class属性的区别.
写在开篇
哈喽！我又来写”水文“了，回顾上篇讲到的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>
下面，我们看看点击前和点击后的效果
点击前：
点击后：
img.png
在上述代码中，主要通过getElementById方法来获取元素id，关于js的使用，笔者后续会专门分享该专题。
写在最后
好了，因笔者时间和精力有限，本篇的分享就到此为止啦！希望本文能帮助到有需要的朋友。望多多关注我们，点赞，收藏、转发！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 一篇”水文“带你解剖HTML中的ID属性以及和Class属性的区别.
本文地址： https://pptw.com/jishu/297183.html