Могу ли я добавить пользовательский атрибут в тег HTML? - PullRequest
Новая
       92

Могу ли я добавить пользовательский атрибут в тег HTML?

311 голосов
/ 14 ноября 2009

Могу ли я добавить пользовательский атрибут в тег HTML следующим образом: <tag myAttri="myVal" />

Ответы [ 13 ]

280 голосов
/ 14 ноября 2009

Вы можете добавлять пользовательские атрибуты к своим элементам по желанию. Но это сделает ваш документ недействительным.

В HTML 5 у вас будет возможность использовать пользовательских атрибутов данных с префиксом data-.

179 голосов
/ 15 ноября 2009

Вы можете изменить объявление! DOCTYPE (т. Е. DTD), чтобы разрешить его, чтобы документ [XML] по-прежнему действовал: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
  <!ATTLIST tag myAttri CDATA #IMPLIED>
]>

#IMPLIED означает, что это необязательный атрибут, или вы можете использовать #REQUIRED и т. Д.

подробнее здесь:

http://www.w3schools.com/xml/xml_dtd_attributes.asp

65 голосов
/ 14 ноября 2009

Нет, это нарушит проверку.

В HTML 5 вы можете / сможете добавлять пользовательские атрибуты. Примерно так: 

<tag data-myAttri="myVal" />
32 голосов
/ 14 ноября 2009

Функция jquery data() позволяет связывать произвольные данные с элементами dom. Вот пример .

11 голосов
/ 01 апреля 2017

В HTML5: да: используйте атрибут data- . 

 <ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li>
  <li data-animal-type="spider">Tarantula</li>
</ul>
10 голосов
/ 14 ноября 2009

Да, вы можете, вы сделали это в самом вопросе: <html myAttri="myVal"/>.

7 голосов
/ 15 ноября 2009

Вы можете установить свойства из JavaScript. 

document.getElementById("foo").myAttri = "myVal"
6 голосов
/ 19 октября 2017 

var demo = document.getElementById("demo")
console.log(demo.dataset.myvar)
// or
alert(demo.dataset.myvar)
//this will show in console the value of myvar
<div id="demo" data-myvar="foo">anything</div>
4 голосов
/ 25 августа 2014

Вы можете сделать это с помощью JavaScript: 

element.getAttribute('key'); // Getter
element.setAttribute('key', 'value'); // Setter
2 голосов
/ 03 августа 2017

Вот пример: 

document.getElementsByTagName("html").foo="bar"

Вот еще один пример того, как установить пользовательские атрибуты в элемент тега body: 

document.getElementsByTagName('body')[0].dataset.attr1 = "foo";
document.getElementsByTagName('body')[0].dataset.attr2 = "bar";

Затем прочитайте атрибут по: 

attr1 = document.getElementsByTagName('body')[0].dataset.attr1
attr2 = document.getElementsByTagName('body')[0].dataset.attr2

Вы можете проверить приведенный выше код в Консоль в DevTools, например

JS Console, DevTools in Chrome

Страница:
...