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

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

<tag myAttri="myVal" />

Ответ 1

Вы можете изменить свое объявление! 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 5 у вас будет возможность использовать атрибуты данных с префиксом data-.

Ответ 3

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

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

<tag data-myAttri="myVal" />

Ответ 4

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

document.getElementById("foo").myAttri = "myVal"

Ответ 8

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

Наличие следующего тега HTML:

<tag key="value"/>

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

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

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

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

Ответ 9

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>

Ответ 10

Вот пример:

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

Ответ 11

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

document.createElement('tag');

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

Ответ 12

Другой подход, который является чистым и будет держать документ действительным, заключается в объединении данных, которые вы хотите использовать в другом теге, например. 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>

Ответ 13

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

<aside data-area="asidetop" data-type="responsive" class="top">

Ответ 14

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

<a href='#' class='click'>
    <span style='display:none;'>value for JavaScript</span>some text
</a>