Чи можна додати спеціальний атрибут до тегу HTML?

350

Чи можна додати спеціальний атрибут до тегу HTML, як описано нижче?

<tag myAttri="myVal" />

html custom-attribute

— lovepring
джерело

3

stackoverflow.com/questions/432174/…

— Tamas Czinege

2

а також stackoverflow.com/questions/209428/…

— Tamas Czinege

можливий дублікат спеціальних атрибутів - Так чи ні?

— Ciro Santilli 郝海东冠状病六四事件法轮功

Хоча відповіді говорять "так", переконайтеся, що у вас є тематичний набір атрибутів, які, швидше за все, не будуть використовуватися з плагінами. наприклад: "data-myuniqueattribute." Я, як правило, просто префіксую що-небудь після "даних" з деяким типом двобуквеного абревіатури. наприклад: "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 - Атрибути .

— карілонатор
джерело

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. Більше того, вони навіть не можуть належним чином пропустити внутрішню підмножину (яка тут використовується), що пояснює мес "]>". Декларація стосуватиметься лише формальної перевірки, і не повинна використовуватися на сторінках виробництва.

— Jukka K. Korpela

32

Ця відповідь стосується лише XHTML та HTML 4.01 та новіших версій. Він повністю пропускає, що тепер ви можете створювати свої власні атрибути, якщо встановити їх за допомогою префікса data-.

— brentonstrine

300

Ви можете додавати власні атрибути до своїх елементів за бажанням. Але це зробить ваш документ недійсним.

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

— Гамбо
джерело

169

Пам'ятати "недійсний" нічого не означає. Сторінка буде виводити штраф 100% часу.

— Джон Фаррелл

22

Насправді "недійсний" має дуже реальні наслідки. Наприклад, він може поставити ваш документ у режим вимкнення. У будь-якому випадку, використовуйте HTML5 і ви будете дійсні.

— brentonstrine

Тут представлена хороша таблиця різних доктів та відповідних режимів браузера: hsivonen.fi/doctype/#handling . HTML5 doctype перемикає всі браузери після 2001 року в режим (Повний) Стандарти. XHTML Перехідні та HTML 4 перехідні (особливо без DTD) доктів не роблять :)

— Ілля Стрельцин

святий солодкий Христос, дякую. @jfar право, але це зменшує читабельність.

— Ніколи більше

Мій документ у будь-якому разі недійсний, тому що він говорить про те, що він |не заборонений у файлі css href, але це те, що потрібно для шрифтів Google

— Опублікувати

73

Ні, це порушить перевірку.

У HTML 5 ви можете / зможете додати спеціальні атрибути. Щось на зразок цього:

<tag data-myAttri="myVal" />

8

але мені не важлива перевірка, я просто хочу, щоб вона могла отримати доступ до Javascript.

— lovepring

10

Це буде працювати звичайно. Але навмисне створення недійсних документів - не така гарна ідея.

31

Створення недійсних документів - чудова ідея. Google створює їх, щоб скоротити час завантаження, кожен сайт, використовуючи полотно, використовує їх для створення кращого користувацького досвіду, а використовувати рамки JavaScript для витягування значущих даних з html-елементів набагато простіше за допомогою користувацької техніки атрибутів.

— Джон Фаррелл

3

@jfar: Полотно недійсне. Це не в HTML 4.01; однак це абсолютно законна частина майбутньої специфікації HTML5.

— bcat

3

Що ви маєте на увазі "недійсний"? Це не є частиною жодної прийнятої специфікації. Як щось може бути дійсним проти специфікації, яка не існує?

— Джон Фаррелл

34

Функція jQuery data()дозволяє асоціювати довільні дані з елементами DOM. Ось приклад .

— Драмон
джерело

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.

— Douwe Maan

Прийміть це як розширення adhoc - не стандарт у строгому розумінні, а свого роду реалізація вимоги, щоб воно не пройшло розбору, якщо воно містить власні атрибути.

— luvieere

2

DouweM: Звичайно, завжди існує серіалізація HTML5 HTML, яка не є ні 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"

— ewg
джерело

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.

— Jukka K. Korpela

Чи це також не визнає 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 (витончена деградація, люди).

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