Могу ли я добавить пользовательский атрибут в тег 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 и битый (ссылка).

— Акаш Агарвал

23

В 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>

— Давиде Андреа
источник

5

Лучший авторитет: developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…

— Цукс,

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

— 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 (изящная деградация, люди).

— Джей Эдвардс