Подтвердить что ты не робот

Могу ли я иметь div с id как число?

Могу ли я иметь div с id как число?

eg <div id="12"></div>

4b9b3361

ОТВЕТЫ

Ответ 1

Можно ли иметь div с id как число?

Да, вы можете.

id значения, которые состоят только из цифр абсолютно верны в HTML; ничего, кроме пространства, все в порядке. И хотя более ранние спецификации HTML были более ограничительными (ref, ref), требуя небольшой набор символов и начиная с буквы, браузеры никогда не заботились, что является большой частью того, почему спецификация HTML5 открывает все возможности.

Если вы собираетесь использовать эти id с помощью селекторов CSS (например, стилей их с помощью CSS) или найдите их с помощью querySelector, querySelectorAll или библиотеки jQuery, которая используйте селектор CSS), имейте в виду, что это может быть болью, потому что вы не можете использовать id, начиная с цифры в селекторе CSS id буквально; вы должны избежать этого. (Например, #12 является недопустимым селектором CSS, вы должны записать его #\31\32.) По этой причине проще начать его с буквы, если вы собираетесь использовать его с помощью селекторов CSS.

Эти ссылки выше в списке для ясности:

Ниже приведен пример с div с id "12" и с ним можно сделать три способа:

  • С CSS
  • С JavaScript через document.getElementById
  • С JavaScript через document.querySelector (в браузерах, которые его поддерживают)

Он работает в каждом браузере, который я когда-либо бросал на него (см. список ниже кода). Живой пример:

(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 <code>document.querySelector</code>:");
    display("document.querySelector(\"#\\\\31\\\\32\").style.fontStyle = \"italic\";", "pre");
  } else {
    display("(This browser doesn't support <code>document.querySelector</code>, 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;
}
<div id="12">This div is: <code>&lt;div id="12">...&lt;/div></code>
</div>
<p>In the above:</p>
<p>The background is set using CSS:</p>
<pre>#\31\32 {
    background: #0bf;
}</pre>
<p>(31 is the character code for 1 in hex; 32 is the character code for 2 in hex. You introduce those hex character sequences with the backslash, <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">see the CSS spec</a>.)</p>
<p>The border is set from JavaScript using <code>document.getElementById</code>:</p>
<pre>document.getElementById("12").style.border = "2px solid black";</pre>

Ответ 2

Из спецификации HTML 5...

Атрибут id указывает свой уникальный идентификатор элемента (ID). [DOM]

Значение должно быть уникальным среди всех идентификаторов в элементе home поддерево и должно содержать хотя бы один символ. Значение не должно содержат любые пробельные символы.

Нет никаких других ограничений на то, какую форму может принять идентификатор; в в частности, идентификаторы могут состоять из простых цифр, начинаться с цифры, начинать с подчеркиванием, состоят только из знаков пунктуации и т.д.

Уникальный идентификатор элемента может использоваться для различных целей, прежде всего как способ ссылки на конкретные части документа с использованием идентификаторы фрагментов, как способ нацеливания элемента при написании сценариев, и как способ стилизации определенного элемента из CSS.

Идентификаторы - это непрозрачные строки. Особые значения не должны быть полученный из значения атрибута id.

Итак... да:)

Из спецификации HTML 4.01...

Идентификатор должен начинаться с письмо ([A-Za-z]) и может быть выполнено любым количеством букв, цифр ([0-9]), дефис ( "-" ), подчеркивание ( "_" ), двоеточия ( ":" ) и периоды ( "").

Итак... no: (

Ответ 3

С точки зрения ремонтопригодности это плохая идея. ID должен быть, по крайней мере, несколько описательным из того, что они представляют. Префикс его с чем-то значимым, чтобы быть совместимым с тем, что уже ответили другие. Например:

<div id ="phoneNumber_12" > </div>

Ответ 4

Вы также можете выбрать этот тип идентификатора (хотя для создания такого идентификатора, который начинается с числа) определенно не лучший способ, выполните следующие действия:

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

Ответ 5

Как указано в других ответах, ответ технически:

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 = "firstName" в своем HTML (нижний регистр "f" ) и "FirstName" {color: red} в вашем CSS (верхний регистр "F" ), багги-браузеры не будут устанавливать элемент цвет до красного. Поскольку оба определения используют допустимые символы для идентификатора, вы не получите ошибки из инструмента проверки.

Вы можете избежать этих проблем, строго придерживаясь соглашения об именах. Например, если вы полностью ограничиваете символы нижнего регистра и всегда разделяете слова с помощью дефисов или подчеркиваний (но не на обоих, выберите один и никогда не используйте другой), тогда у вас есть простой для запоминания шаблон. Вы никогда не будете удивляться: "это было firstName или FirstName?" потому что вы всегда будете знать, что вы должны ввести first_name.

Тот же вопрос уже спрашивает

Каковы допустимые значения для атрибута id в HTML?

Ответ 6

Хотя ответ TJ Crowder концептуально хорош, он не работает для селекторов CSS потомков.

При прохождении только первого символа, за которым следует пробел, он работает (как в Chrome 49)

Предположим, что следующий фрагмент HTML:

<td id="123456">
 <div class="blah">
  <div class="yadah">play that funky music</div>
 </div>
</td>

Следующее утверждение:

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

правильно отображает воспроизведение этой фанковой музыки