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

293

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

  • 3
    stackoverflow.com/questions/432174/...
  • 2
    а также stackoverflow.com/questions/209428/…
Показать ещё 3 комментария
Теги:
custom-attribute

13 ответов

177
Лучший ответ

Вы можете изменить свое объявление 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

Поделиться
  • 0
    Нужно ли мне создать файл DTD или просто добавить встроенный ATTLIST в HTML-файл?
  • 2
    просто поместите все это вверху вашего html-файла (при условии, что xhtml 1.0 переходный нормально)
Показать ещё 11 комментариев
276

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

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

Поделиться
  • 158
    Помните, что «неверный» ничего не значит. Страница будет отображаться нормально 100% времени.
  • 18
    На самом деле «недействительный» имеет очень реальные последствия. Например, он может поместить ваш документ в режим рендеринга. В любом случае, используйте тип документа HTML5, и вы будете действительны.
Показать ещё 8 комментариев
57

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

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

<tag data-myAttri="myVal" />
Поделиться
  • 7
    но мне все равно, валидация, я просто хочу, чтобы к ней мог получить доступ javascript.
  • 8
    Это будет работать, конечно. Но умышленное создание недействительных документов не такая хорошая идея.
Показать ещё 6 комментариев
31

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

Поделиться
  • 0
    Это золотой.
  • 1
    @TrevorWood и битый (ссылка).
10

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

Поделиться
  • 2
    Зависит от того, что вы определяете как HTML. Я думаю о HTML как о языке, основанном на SGML, с определенным набором элементов и атрибутов. XHTML - это вариант XML с определенным набором элементов и атрибутов, который очень похож на HTML. Когда вы используете свои собственные атрибуты, это все еще SGML из XML, но больше не HTML из XHTML по моему мнению.
  • 0
    Воспринимайте это как расширение adhoc, не как стандарт в строгом смысле слова, а как своего рода реализацию требования о том, что он не должен прекратить анализ, если он содержит настраиваемые атрибуты.
Показать ещё 2 комментария
7

В 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>
Поделиться
7

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

document.getElementById("foo").myAttri = "myVal"
Поделиться
6 

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>
Поделиться
  • 0
    Пожалуйста, добавьте краткое объяснение к вашему ответу.
3

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

element.getAttribute('key'); // Getter
element.setAttribute('key', 'value'); // Setter
Поделиться
2

Вот пример:

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, например.

Изображение 2671

Поделиться
0

Другой подход, который является чистым и будет держать документ действительным, заключается в объединении данных, которые вы хотите использовать в другом теге, например. id, затем используйте split, чтобы взять то, что вы хотите, когда захотите.

<html>
<script>
  function demonstrate(){
    var x = document.getElementById("example data").querySelectorAll("input");
    console.log(x);
    for(i=0;i<x.length;i++){
      var line_to_illustrate = x[i].id  + ":" + document.getElementById ( x[i].id ).value;
      //concatenated values
      console.log("this is all together: " + line_to_illustrate); 
      //split values
      var split_line_to_illustrate = line_to_illustrate.split(":");
      for(j=0;j<split_line_to_illustrate.length;j++){
        console.log("item " + j+ " is: " + split_line_to_illustrate[j]);
      }      
    }
  }
</script> 

<body>

<div id="example data">
  <!-- consider the id values representing a 'from-to' relationship -->
  <input id="1:2" type="number" name="quantity" min="0" max="9" value="2">
  <input id="1:4" type="number" name="quantity" min="0" max="9" value="1">
  <input id="3:6" type="number" name="quantity" min="0" max="9" value="5">  
</div>

<input type="button" name="" id="?" value="show me" onclick="demonstrate()"/>

</body>
</html>
Поделиться
0

Вы можете добавить, но тогда вам также нужно написать строку javascript:

document.createElement('tag');

чтобы убедиться, что все встало на свои места. Я имею в виду IE:)

Поделиться
  • 2
    Это будет актуально, если имя тега не известно IE. Здесь проблема заключается в настраиваемом атрибуте, а не в настраиваемом теге; Слово «тег» в <tag ...> здесь, очевидно, означает просто любой тег HTML.
  • 0
    Разве это также не делает недействительным XHTML (если это не признанный тег)?
-9

Вы можете сделать что-то подобное, чтобы извлечь нужное значение из javascript вместо атрибута

<a href='#' class='click'>
    <span style='display:none;'>value for javascript</span>some text
</a>
Поделиться
  • 0
    Атрибуты существуют по причине; как и такие вещи, как <input type="hidden" value="..."> . Однако следует учитывать разницу между типом данных, которые вы вводите в различные атрибуты, в отличие от данных, которые вы можете поместить в скрытое поле. Скрывать <span> (всех вещей) в <a> ради сохранения части метаданных - не очень хороший шаг. Это будет свойственно вашему сайту и очень сильно зависит от JS (изящная деградация, люди).

Ещё вопросы

Сообщество Overcoder
Наверх
Меню