HTML 태그에 사용자 정의 속성을 추가 할 수 있습니까?

다음과 같이 HTML 태그에 사용자 정의 속성을 추가 할 수 있습니까?

<tag myAttri="myVal" />

! 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- 속성에 있습니다.

원하는대로 요소에 사용자 정의 속성을 추가 할 수 있습니다. 그러나 그렇게하면 문서가 유효하지 않게됩니다.

HTML 5에서는 접두사가 붙은 맞춤 데이터 속성data- 을 사용할 수 있습니다 .

아니요, 유효성 검사가 중단됩니다.

HTML 5에서는 사용자 정의 속성을 추가하거나 추가 할 수 있습니다. 이 같은:

<tag data-myAttri="myVal" />

jQuery data()함수를 사용하면 임의의 데이터를 DOM 요소와 연결할 수 있습니다. 다음은 예 입니다.

HTML5의 경우 : yes : data- attribute를 사용하십시오 .

 <ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li>
  <li data-animal-type="spider">Tarantula</li>
</ul> 

그렇습니다, 당신은 질문 자체에서 그것을 할 수 있습니다 <html myAttri="myVal"/>.

예, 할 수 있습니다!

다음 HTML태그가있는 경우 :

<tag key="value"/>

다음과 JavaScript같이 속성에 액세스 할 수 있습니다 .

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

Element.setAttribute()HTML존재하지 않는 경우 속성을 태그 에 넣습니다 . 따라서 HTML로 설정하려는 경우 코드 에서 선언 할 필요가 없습니다 JavaScript.

key: 속성에 원하는 이름이 될 수 있지만 현재 태그에는 아직 사용되지 않았습니다. value: 항상 필요한 것을 포함하는 문자열입니다.

JavaScript에서 속성을 설정할 수 있습니다.

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

예를 들면 다음과 같습니다.

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의 콘솔 에서 위의 코드를 테스트 할 수 있습니다.

data-any를 사용하고 많이 사용합니다.

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

깨끗하고 문서를 유효하게 유지하는 또 다른 접근법은 원하는 데이터를 다른 태그 (예 : 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>

추가 할 수는 있지만 JavaScript 코드도 작성해야합니다.

document.createElement('tag');

모든 것이 제자리에 있는지 확인하십시오. 나는 Internet Explorer를 의미한다 :)

잘! 실제로 원하는 속성을 데이터 속성으로 위장하여 여러 가지 맞춤 HTML 속성을 만들 수 있습니다.

예.

[attribute='value']{
color:red;
}

<span attribute="value" >hello world</span>

그것은 분명히 작동하지만 문서를 무효화 할 것입니다 .JScript를 사용하여 사용자 정의 속성이나 요소를 가질 필요가 없다면, 새로운 공식화 된 (사용자 정의) 속성을 처리하는 것과 같은 방식으로 처리하면됩니다. "데이터"속성

기억 "무효"는 없습니다 평균 아무것도 않습니다. 문서가 항상 제대로로드됩니다. 일부 브라우저는 실제로 DOCTYPE ..... 만 있으면 문서의 유효성을 검사 할 것입니다.

다음과 같이 속성 대신 JavaScript에서 원하는 값을 추출 할 수 있습니다.

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