다음과 같이 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- 속성에 있습니다.
<meta http-equiv="content-type" content="application/xhtml+xml" />.
data-졌습니다.
원하는대로 요소에 사용자 정의 속성을 추가 할 수 있습니다. 그러나 그렇게하면 문서가 유효하지 않게됩니다.
HTML 5에서는 접두사가 붙은 맞춤 데이터 속성data- 을 사용할 수 있습니다 .
|CSS에서 허용되지 않는다고 알려주기 때문에 어쨌든 유효 하지 않습니다 href. 그러나 Google Fonts에 필요한 것입니다
아니요, 유효성 검사가 중단됩니다.
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"/>.
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'); // SetterElement.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.attr2DevTools의 콘솔 에서 위의 코드를 테스트 할 수 있습니다.
data-any를 사용하고 많이 사용합니다.
<aside data-area="asidetop" data-type="responsive" class="top">data-*JavaScript에서 가치 를 얻는 방법은 무엇입니까?
깨끗하고 문서를 유효하게 유지하는 또 다른 접근법은 원하는 데이터를 다른 태그 (예 : 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를 의미한다 :)
<tag ...>여기서 "태그"라는 단어는 HTML 태그를 의미합니다.
잘! 실제로 원하는 속성을 데이터 속성으로 위장하여 여러 가지 맞춤 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><input type="hidden" value="...">합니다. 그러나 숨겨진 필드에 넣을 수있는 데이터와 대조적으로 다양한 속성에 넣은 데이터 유형의 차이를 고려하십시오. 메타 데이터 조각을 유지하기 위해 <span>모든 것을 숨기는 것은 <a>좋은 방법이 아닙니다. 귀하의 사이트에 따라 다르며 JS (우아한 퇴보, 사람들)에 크게 의존합니다.