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"/>.
JavaScript에서 속성을 설정할 수 있습니다.
document.getElementById("foo").myAttri = "myVal"
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>예, 할 수 있습니다!
다음 HTML태그가있는 경우 :
<tag key="value"/>
다음을 통해 속성에 액세스 할 수 있습니다 JavaScript.
element.getAttribute('key'); // Getter
element.setAttribute('key', 'value'); // Setter
Element.setAttribute()HTML존재하지 않는 경우 속성을 태그 에 넣습니다 . 따라서 HTML로 설정하려는 경우 코드 에서 선언 할 필요가 없습니다 JavaScript.
key: 속성에 원하는 이름이 될 수 있지만 현재 태그에는 아직 사용되지 않았습니다. value: 항상 필요한 것을 포함하는 문자열입니다.
예를 들면 다음과 같습니다.
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의 콘솔 에서 위의 코드를 테스트 할 수 있습니다.
깨끗하고 문서를 유효하게 유지하는 또 다른 접근법은 원하는 데이터를 다른 태그 (예 : 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를 의미한다 :)
data-any를 사용하고 많이 사용합니다.
<aside data-area="asidetop" data-type="responsive" class="top">
다음과 같이 속성 대신 JavaScript에서 원하는 값을 추출 할 수 있습니다.
<a href='#' class='click'>
<span style='display:none;'>value for JavaScript</span>some text
</a>
참고 URL : https://stackoverflow.com/questions/1735230/can-i-add-a-custom-attribute-to-an-html-tag
'Programing' 카테고리의 다른 글
| 패키지 폴더를 무시하도록 TFS 받기 (0) | 2020.03.08 |
|---|---|
| 파이썬 로깅 출력을 어떻게 채색 할 수 있습니까? (0) | 2020.03.08 |
| 안드로이드 에뮬레이터는 키보드 입력을받지 않습니다-SDK tools rev 20 (0) | 2020.03.08 |
| mapDispatchToProps 란 무엇입니까? (0) | 2020.03.08 |
| 파이썬에서 matplotlib을 사용하여 로그 축을 플롯하십시오. (0) | 2020.03.08 |