为HTML元素创建id属性时,该值有哪些规则?
当前回答
救命,我的Javascript坏了!
每个人都说ID不能重复。
在除FireFox之外的所有浏览器中都试用过
<div id=“ONE”></div><div id=“ONE”></div><div id=“ONE”></div><脚本>document.body.append(document.querySelectorAll(“#ONE”).length,'DIV!')document.body.append('in',typeofONE)console.log(一);//全局变量!!</script>
解释
在世纪之交,微软拥有90%的浏览器市场份额,
并实施从未标准化的浏览器行为:
1.为每个ID创建全局变量
2.为重复ID创建数组
所有后来的浏览器供应商都复制了这种行为,否则他们的浏览器将不支持旧网站。
2015年左右,Mozilla删除了2。来自FireFox和1。仍然有效。
所有其他浏览器仍然支持1。和2。
我每天都使用它,因为键入ONE而不是document.querySelector(“#ONE”)帮助我更快地创建原型;我不在生产中使用它。
其他回答
连字符、下划线、句点、冒号、数字和字母都适用于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>
根据HTML 4规范:
ID和NAME标记必须以字母([a-Za-z])开头,后面可以是任意数量的字母、数字([0-9])、连字符(“-”)、下划线(“_”)、冒号(“:”)和句点(“.”)。
一个常见的错误是使用以数字开头的ID。
此外,永远不要忘记ID是唯一的。一旦使用,ID值可能不会再次出现在文档中的任何位置。
您可能有许多ID,但所有ID都必须具有唯一的值。
另一方面,还有class元素。就像ID一样,它可以出现多次,但值可能会被反复使用。
从HTML 4规范。。。
ID和NAME标记必须以字母([a-Za-z])开头,后面可以是任意数量的字母、数字([0-9])、连字符(“-”)、下划线(“_”)、冒号(“:”)和句点(“.”)。
没有空格,并且必须至少以a到z和0到9之间的字符开头。