html div id数字,关于javascript：我可以将id为数字的div设置为数字吗？

最新推荐文章于 2022-01-23 13:31:10 发布

luminousLCH

最新推荐文章于 2022-01-23 13:31:10 发布

阅读量483

点赞数

文章标签： html div id数字

这篇博客讨论了HTML5中ID属性的规则变化，指出虽然技术上可以使用仅由数字组成的ID，但在实际使用中，尤其是与CSS选择器配合时可能会遇到问题。文章提供了示例代码，解释了如何在CSS和JavaScript中处理以数字开头的ID，并建议为了可维护性和兼容性，最好避免使用这种做法。

摘要由CSDN通过智能技术生成

我可以用id作为数字的div吗？

例如

它可能在某些浏览器中有效，至少在IE8和FF3.5中有效，但是如上所述，请以字母开头的ID。 jsfiddle.net/LncAc

是的，您可以(从HTML5开始)。这是一个简短而完整的答案：stackoverflow.com/a/31773673/3597276

可能重复的内容是HTML中id属性的有效值是什么？

Can I have a div with id as number?

是的你可以。

仅由数字组成的id值在HTML中完全有效；除了空间，其他都没有。而且，尽管早期的HTML规范更具限制性(ref，ref)，只需要少量字符并以字母开头，但浏览器却从不在乎，这是HTML5规范为人开放的重要原因。

如果您打算将这些id与CSS选择器一起使用(例如，使用CSS设置样式，或者使用querySelector，querySelectorAll或使用CSS选择器的jQuery之类的库来查找它们)，请注意可能会很痛苦，因为您不能在字面上直接在CSS id选择器中使用以数字开头的id；你必须逃避它。 (例如，#12是无效的CSS选择器；您必须将其编写为#\31\32。)因此，如果要与CSS选择器一起使用，则以字母开头更简单。

为了清楚起见，以上列表中的那些链接：

HTML5-ID属性

HTML4-ID属性以及ID和NAME令牌

ID的CSS 2.1规则

下面是使用div和id" 12"并通过三种方式处理的示例：

使用CSS

通过document.getElementById使用JavaScript

通过document.querySelector使用JavaScript(在支持它的浏览器上)

它可以在我扔过的所有浏览器上使用(请参见代码下方的列表)。现场示例：

(function() {

"use strict";

document.getElementById("12").style.border ="2px solid black";

if (document.querySelector) {

document.querySelector("#\\31\\32").style.fontStyle ="italic";

display("The font style is set using JavaScript with document.querySelector:");

display("document.querySelector("#\\\\31\\\\32").style.fontStyle = "italic";","pre");

} else {

display("(This browser doesn't support document.querySelector, so we couldn't try that.)");

}

function display(msg, tag) {

var elm = document.createElement(tag || 'p');

elm.innerHTML = String(msg);

document.body.appendChild(elm);

}

})();

#\31\32 {

background: #0bf;

}

pre {

border: 1px solid #aaa;

background: #eee;

}

This div is: ...

In the above:

The background is set using CSS:

[cc lang="javascript"]#\31\32 {

background: #0bf;

}

(31是十六进制1的字符代码； 32是十六进制2的字符代码。您将这些十六进制字符序列加上反斜杠，请参阅CSS规范。)

使用document.getElementById从JavaScript设置边框：

document.getElementById("12").style.border ="2px solid black";

code> pre>

我从未在浏览器中看到以上失败。这是我所见过的一部分浏览器：

铬26、34、39

IE6，IE8，IE9，IE10，IE11

Firefox 3.6、20、29

IE10(移动版)

Safari iOS 3.1.2，iOS 7

Android 2.3.6、4.2

Opera 10.62、12.15、20

Konquerer 4.7.4

再说一遍：如果要在元素上使用CSS选择器，则最好以字母开头；像#\31\32这样的选择器很难读取。

只是添加-仅因为您可以做某事并不意味着您应该这样做。 HTML5是否摆脱了限制并不重要，HTML5在程序员中的相当标准是不要以数字开头的方法，函数或任何东西-那么为什么要更改标记语言？坚持你已经做的事:)

顺便说一句，对不起，我很抱歉，这是HTML5的问题之一。对于它添加的每项令人敬畏的功能，它都会破坏我们在HTML / XHTML中变得如此习惯的验证和规则，这可能就是人们如今遇到如此多问题的原因，您知道吗？

@Zarazthuztra：显然在这种情况下，这只是现实的反映。浏览器已经允许除了空格以外的任何内容，因此他们将其编入了代码。

@ T.J.Crowder我同意你的看法，但是HTML5的采用如此分散，至少在问这个问题时，它给人们带来了很多问题，知道我的意思吗？哦，好吧，HTML5还是反过来:)

我认为我们不允许使用以数字字符开头的div ID ... w3.org/TR/html4/types.html#type-name

@hitesh：当然可以。我在原始答案中引用了以上两个HTML规范(均比该规范更新)。我已经添加了示例和演示页面。你能行的。我并不是说我认为这是个好主意。

@ T.J Crowder：感谢您提供新信息，Example确实很有帮助

我不喜欢这么多人强烈劝阻某些有效做法。如果您使用id作为模板类型的元素，这可能不切实际(并且绝对不是很漂亮)，但是如果您使用元素id作为注释(例如，使其与#id锚定)，则此方法非常实用且优雅。而且您有99.9％的时间永远不需要CSS规则。

@fay：同意。如果您不打算将CSS选择器与该元素一起使用，则没有特别好的理由不要使用全数字id。我已经对A)做了些表述，B)少讲一些。

从HTML 5规范...

The id attribute specifies its element's unique identifier (ID). [DOM]

The value must be unique amongst all the IDs in the element's home

subtree and must contain at least one character. The value must not

contain any space characters.

There are no other restrictions on what form an ID can take; in

particular, IDs can consist of just digits, start with a digit, start

with an underscore, consist of just punctuation, etc.

An element's unique identifier can be used for a variety of purposes,

most notably as a way to link to specific parts of a document using

fragment identifiers, as a way to target an element when scripting,

and as a way to style a specific element from CSS.

Identifiers are opaque strings. Particular meanings should not be

derived from the value of the id attribute.

所以...是的:)

从HTML 4.01规范...

ID must begin with a

letter ([A-Za-z]) and may be followed

by any number of letters, digits

([0-9]), hyphens ("-"), underscores

("_"), colons (":"), and periods

(".").

所以不行：(

您还可以通过执行以下操作来选择该类型的ID(尽管创建以数字开头的ID绝对不是最佳做法)：

document.querySelector('div[id="12"]'); //or

document.querySelectorAll('div[id="12"]'); //if you have multiple elements with equal ID.

从可维护性的角度来看，这是一个坏主意。 ID至少应在某种程度上描述它们所代表的含义。给它加上有意义的前缀，使其与其他人已经回答过的东西兼容。例如：

下注照顾解释？抱歉，此答案中没有任何错误。它是基于其他人所说的协议和建议。

我并没有拒绝投票，但希望观察到，使用大量id，这种方法会导致很多基本上毫无价值的膨胀。同样，这意味着每次引用一个id时，都需要对其进行解析以分割出phoneNumber_位并获得真实的id。同样，ID并非旨在具有语义含义，而只是旨在是唯一的。

尽管TJ Crowder的回答在概念上是不错的，但不适用于后代CSS选择器。

但是，仅转义第一个字符后跟空格确实可以(例如Chrome 49)

假定以下HTML代码段：

play that funky music

以下语句：

document.querySelector("#\\31 23456 .blah .yadah").style.fontStyle ="italic";

正确显示播放那种时髦的音乐

正如其他答复中指出的那样，答案在技术上是：

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

但是，实际上，如果您希望文档可以与各种浏览器，CSS编辑器和JavaScript框架一起使用，将会受到更大的限制。

如其他回应所述，jQuery在包含句点和冒号的ID方面存在问题。

一个更微妙的问题是，已知某些浏览器错误地将id属性值视为区分大小写。这意味着，如果您在HTML中输入id =" firstName"(小写字母" f")，而在CSS中输入.FirstName {color：red}(大写字母" F")，则有问题的浏览器将不会设置该元素的颜色变为红色。因为两个定义都使用有效字符作为id，所以您不会从验证工具收到任何错误。

您可以通过严格遵循命名约定来避免这些问题。例如，如果您将自己完全限制为小写字母，并且始终使用连字符或下划线来分隔单词(但不能同时使用两个字符，请选择一个而不使用另一个)，那么您将拥有一个易于记忆的模式。您将永远不会怀疑"是名字还是名字？"因为您将永远知道您应该键入first_name。

已经问过同样的问题

HTML中id属性的有效值是什么？

" jQuery的ID包含句点和冒号时出现问题"是吗？在最近几年的发行中？什么样的问题？任何用户错误吗？链接：在FAQ中使用带点和冒号的ID(例如)，尽管如此，您仍然指出了与不完善工具的兼容性。

不，它必须以字母开头。参见http://www.electrictoolbox.com/valid-characters-html-id-attribute/。您可以在第一个字符后使用数字，例如a1或theansweris42。

从HTML5开始，此答案不正确。 stackoverflow.com/a/31773673/3597276