지정된 요소 아래에 인라인 모달을 표시하는 간단한 jQuery 플러그인을 작성하고 싶습니다. 내 생각은 스크립트가 요소에 지정된 데이터 속성을 기반으로 자동 초기화하는 것입니다.
아주 기본적인 예 :
<p data-modal-target>Hover over me for an inline modal!</p>
<div data-modal-content data-modal-align="right" data-modal-trigger="hover" data-modal-offset="10px"><!-- any desired syntax can go here --></div>
data-modal-target위의 예가 유효한지 궁금합니다. 아니면 그래야만 data-modal-target="true"하나요? 나는 IE9 등보다 더 끔찍한 것에 대해 신경 쓰지 않으며, 유일한 요구 사항은 유효한 HTML5라는 것입니다.
답변
유효하지만 부울이 아닙니다.
사용자 지정 데이터 속성 사양 은 빈 속성 처리에 대한 변경 사항을 언급하지 않으므로 빈 속성에 대한 일반 규칙이 여기에 적용됩니다.
특정 속성은 값없이 속성 이름 만 제공하여 지정할 수 있습니다.
다음 예에서
disabled속성은 빈 속성 구문으로 제공됩니다.<input disabled>빈 속성 구문은 다음 예제에서와 같이 속성 값으로 빈 문자열을 지정하는 것과 정확히 동일합니다.
<input disabled="">
따라서 빈 사용자 지정 데이터 속성을 사용할 수 있지만 부울로 사용하려면 특별한 처리가 필요합니다.
빈 속성에 액세스 할 때 해당 값은 ""입니다. 거짓 값이기 때문에 if (element.dataset.myattr)속성이 있는지 확인하는 데 사용할 수 없습니다 .
element.hasAttribute('myattr')또는 if (element.dataset.myattr !== undefined)대신 사용해야 합니다.
로이드의 대답은 틀 렸습니다. 그는 부울 속성 microsyntax에 대한 링크를 언급했지만 data-*속성은 사양에서 부울로 지정되지 않았습니다.
답변
예, 완벽하게 유효합니다. 귀하의 경우 data-modal-target부울 속성을 나타냅니다.
2.4.2 부울 속성
요소에 부울 속성이 있으면 참 값을 나타내고 속성이 없으면 거짓 값을 나타냅니다.
답변
예, 사용자 정의 데이터 속성 값을 생략하는 것은 유효한 구문입니다.
“속성은 네 가지 방법으로 지정할 수 있습니다.
빈 속성 구문 속성 이름입니다. 값은 암시 적으로 빈 문자열입니다. […] ”
https://developers.whatwg.org/syntax.html#attributes-0
답변
한편으로는 유효성 검사기 16.5.7 https://validator.w3.org/nu/#textarea를 통과합니다 .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>a</title>
</head>
<body data-asdf>
</body>
</html>다른 한편, HTML5는 data-속성 사양에서 부울 이라고 말하지 않습니다 . https://www.w3.org/TR/html5/dom.html#custom-data-attribute 다른 부울에 대해 매우 명확하게 말합니다. https://www.w3.org/TR/html5/forms.html#attr-input-checked 와 같은 속성checked