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

350

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

<tag myAttri="myVal" />
html custom-attribute lovespring
источник
3
stackoverflow.com/questions/432174/…
Тамас Чинеге
2
а также stackoverflow.com/questions/209428/...
Тамаш Czinege
возможный дубликат пользовательских атрибутов - да или нет?
Сиро Сантилли 郝海东 冠状 病 六四 事件 法轮功
Хотя ответы говорят «да», убедитесь, что у вас есть тематический набор атрибутов, которые вряд ли будут использоваться с плагинами. Например: «data-myuniqueattribute». Я обычно просто ставлю перед префиксом «data-» что-нибудь с двухбуквенным сокращением. например: "data-yscolumntype." Держите это уникальным.

Ответы:

189

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

Больше информации в DTD - Атрибуты .

carillonator
источник
2
просто поместите все это в верхнюю часть вашего html-файла (при условии, что переходный xhtml 1.0 в порядке)
carillonator
8
Может быть, я что-то упускаю, но если вы следуете такому подходу,]> отображается на отображаемой веб-странице. Случилось мне на Firefox 3.6. Этот фрагмент от alistapart.com/articles/customdtd, по- видимому, подтверждает это поведение: «Если вы скачаете файлы примеров для этой статьи и проверите файл internal.html, вы можете убедиться в этом сами. К сожалению, при отображении файла в браузере ,]> появляется на экране. Обойти эту ошибку невозможно, поэтому этот подход не имеет смысла. "
Майк
3
Несколько вещей, которые могут помочь с появлением "]>": Сохраните файл с расширением .xhtml. Включите MIME-тип в файл с <meta http-equiv="content-type" content="application/xhtml+xml" />.
LS
4
Объявление атрибута не имеет смысла, если учитывать поведение браузера. Они не читают DTD. Более того, они даже не могут правильно пропустить внутреннее подмножество (которое используется здесь), что объясняет «]>» meass. Декларация будет относиться только к формальной валидации и не должна использоваться на рабочих страницах.
Юкка К. Корпела
32
Этот ответ относится только к XHTML и HTML 4.01 и старше. Совершенно не хватает того, что теперь вы можете создавать свои собственные атрибуты, если будете добавлять к ним префикс data-.
Брентонстрин
300

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

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

гумбо
источник
169
Помните, что «неверный» ничего не значит. Страница будет отображаться нормально 100% времени.
Джон Фаррелл
22
На самом деле «инвалид» имеет очень реальные последствия. Например, он может поместить ваш документ в режим рендеринга. В любом случае, используйте тип документа HTML5, и вы будете действительны.
Брентонстрин
Здесь есть хорошая таблица различных типов документов и соответствующих режимов браузера: hsivonen.fi/doctype/#handling . HTML5 doctype переключает все браузеры после 2001 года в режим (Full) Standards. XHTML Transitional и HTML 4 Transitional (особенно без DTD) не имеют типов документов :)
Илья Стрельцын
Святой сладкий Христос, спасибо. @jfar верно, но это уменьшает читабельность.
Nevermore
Мой документ в любом случае недействителен, потому что он говорит мне, |что не допускается в CSS href, но это то, что необходимо для шрифтов Google
Post Self
73

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

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

<tag data-myAttri="myVal" />

источник
8
но мне все равно, валидация, я просто хочу, чтобы к ней мог получить доступ javascript.
родник
10
Это будет работать, конечно. Но намеренное создание недействительных документов не такая хорошая идея.
31
Создание недействительных документов - отличная идея. Google создает их, чтобы сократить время загрузки, каждый сайт, использующий canvas, использует их для создания лучшего пользовательского опыта, а использование каркасов javascript для извлечения значимых данных из html-элементов намного проще с помощью технологии пользовательских атрибутов.
Джон Фаррелл
3
@jfar: Canvas не является недействительным. Это не в HTML 4.01; однако это совершенно законная часть будущей спецификации HTML5.
Bcat
3
Что вы имеете в виду "не недействительным"? Это не является частью какой-либо принятой спецификации. Как что-то может быть действительным в отношении несуществующей спецификации?
Джон Фаррелл
34

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

Draemon
источник
1
Это золотой.
Тревор Вуд
1
@TrevorWood и битый (ссылка).
Акаш Агарвал
11

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

luvieere
источник
2
Зависит от того, что вы определяете как HTML. Я думаю о HTML как о языке, основанном на SGML, с определенным набором элементов и атрибутов. XHTML - это вариант XML с определенным набором элементов и атрибутов, который очень похож на HTML. Когда вы используете свои собственные атрибуты, это все еще SGML из XML, но больше не HTML из XHTML, по моему мнению.
Доуу Маан
Воспринимайте это как расширение adhoc, не как стандарт в строгом смысле слова, а как своего рода реализацию требования о том, что он не должен прервать анализ, если он содержит настраиваемые атрибуты.
Luvieere
2
DouweM: Конечно, всегда есть HTML-сериализация HTML5, которая не является ни SGML, ни XML.
Bcat
2
И вы сломали (аннулировали) документ в процессе. Не хорошая практика.
Карильонатор
10 

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>
Развернуть фрагмент

Джасим Дроид
источник
2
Пожалуйста, добавьте краткое объяснение к вашему ответу.
Николай Михайлов
10

Да, ты можешь сделать это!

Имея следующий HTMLтег:

<tag key="value"/>

Мы можем получить доступ к их атрибутам с помощью JavaScript:

element.getAttribute('key'); // Getter
element.setAttribute('key', 'value'); // Setter

Element.setAttribute()поместите атрибут в HTMLтег, если он не существует. Таким образом, вам не нужно объявлять это в HTMLкоде, если вы собираетесь установить его с помощью JavaScript.

key: может быть любым именем, которое вы хотите использовать для атрибута, но еще не используется для текущего тега. value: это всегда строка, содержащая то, что вам нужно.

IgniteCoders
источник
7

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

document.getElementById("foo").myAttri = "myVal"
ЭРГ
источник
4

Вот пример:

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, DevTools в Chrome

kenorb
источник
1

использовать данные-любые, я использую их много

<aside data-area="asidetop" data-type="responsive" class="top">
Эрик Бойло
источник
Как вы получаете data-*значения из JavaScript?
Аарон Франке
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>
CAtoOH
источник
0

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

document.createElement('tag');

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

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

хорошо! вы можете создать кучу пользовательских атрибутов HTML, замаскировав атрибуты данных в соответствии с вашими требованиями.

например. 

[attribute='value']{
color:red;
}
<span attribute="value" >hello world</span>

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

Помните, что «неверный» ничего не значит. Документ будет загружаться нормально все время. и некоторые браузеры фактически проверяют ваш документ только при наличии DOCTYPE ....., вы действительно знаете, что я имею в виду.

Абдулбасит
источник
-8

Вы можете сделать что-то вроде этого, чтобы извлечь нужное значение из JavaScript вместо атрибута:

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