为HTML元素创建id属性时,该值有哪些规则?
当前回答
元素的唯一标识符。
文档中不能有多个元素具有相同的id值。
任何字符串,具有以下限制:
必须至少有一个字符长不得包含任何空格字符:U+0020空格U+0009字符表(选项卡)U+000A管线进料(LF)U+000C模板进料(FF)U+000D回车(CR)
使用ASCII字母和数字以外的字符,“_”、“-”和“.”可能会导致兼容性问题,因为HTML 4中不允许这些问题。虽然HTML5中取消了这一限制,但为了兼容性,ID应该以字母开头。
其他回答
根据HTML 4规范:
ID和NAME标记必须以字母([a-Za-z])开头,后面可以是任意数量的字母、数字([0-9])、连字符(“-”)、下划线(“_”)、冒号(“:”)和句点(“.”)。
一个常见的错误是使用以数字开头的ID。
实际上,许多网站使用以数字开头的id属性,尽管这在技术上是无效的HTML。
HTML5草案规范放宽了id和name属性的规则:它们现在只是不透明的字符串,不能包含空格。
自ES2015以来,如果文档字符集设置为UTF-8,我们也可以使用几乎所有的Unicode字符作为ID。
在此测试:https://mothereff.in/js-variables
阅读:ES2015中有效的JavaScript变量名
在ES2015中,标识符必须以$、_或任何带有Unicode派生的核心属性ID_Start。标识符的其余部分可以包含$、_、U+200C零宽度非连接符、U+200D零宽度连接符或任何Unicode符号派生的核心属性ID_Continue。
const target=document.querySelector(“div”).idconsole.log(“Div-id:”,目标)document.getElementById(目标).style.background=“chartreuse”第二部分{边框:5px蓝色实心;宽度:100%;高度:200px}<div id=“H̹̙̦̮͉̩̗ͻͧ̏̾Eͨ͆͒̆ͮ͏̷̰̣̫̤C͈̻ͯ͐O̜͎͍878;͐͗ͤ781;͢M̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ“”</div>
你应该使用它吗?可能不是个好主意!
阅读:JavaScript:“函数体后面缺少语法错误}”
连字符、下划线、句点、冒号、数字和字母都适用于CSS和jQuery。以下内容应该有效,但在整个页面中必须是唯一的,并且必须以字母[a-Za-z]开头。
使用冒号和句点需要做更多的工作,但可以按照下面的示例进行操作。
<html>
<head>
<title>Cake</title>
<style type="text/css">
#i\.Really\.Like\.Cake {
color: green;
}
#i\:Really\:Like\:Cake {
color: blue;
}
</style>
</head>
<body>
<div id="i.Really.Like.Cake">Cake</div>
<div id="testResultPeriod"></div>
<div id="i:Really:Like:Cake">Cake</div>
<div id="testResultColon"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var testPeriod = $("#i\\.Really\\.Like\\.Cake");
$("#testResultPeriod").html("found " + testPeriod.length + " result.");
var testColon = $("#i\\:Really\\:Like\\:Cake");
$("#testResultColon").html("found " + testColon.length + " result.");
});
</script>
</body>
</html>
字母表→ 大写和小写
数字→ 0-9
特殊字符→ ':', '-', '_', '.'
格式应以“.”开头或字母表,后跟更多字母或数字的特殊字符。id字段的值不能以“_”结尾。
此外,不允许空格,如果提供了空格,它们将被视为不同的值,这在id属性的情况下是无效的。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击