HTMLにカスタムブール値属性などがありますか？

Question

HTML5では、カスタムdata-* attributesを使用できます。しかし、私はそれを理解し、彼らが属性であると考えているので、私はそれらが文字列値を要求すると期待しています。カスタムでのプロパティ、つまりchecked、required、hiddenなどのブール値のプロパティを許可する代替HTMLがありますか？

私は学校のウェブサイトを持っているとしましょう。また、ユーザーが教師であればページ上のいくつかの要素をユーザーと対話させるが、生徒ではないとします。 JavaScriptでは、プロパティーteacher-can-interactまたは類似のものを持ついくつかの要素にイベントをアタッチするとよいでしょう。私は明らかにクラスやデータ属性を使うことができますが、クラスは意味的には見えず、yes値のデータ属性は私の意見ではばかげています。

カスタムプロパティをサポートする方法はありますか、または計画はありますか？

編集：プロパティによって、バージョン1.6（.1）以降のjQueryでの区別を参照しています。プロパティは主にのブール値の属性です。以下のコードがtrueを返すと期待していますが、空の文字列を返します。明らかに

console.log($("div").prop("data-intrusive")); 
 
console.log($("div").attr("data-intrusive"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div data-intrusive></div>

、そのようなtypeofや物事をチェックするなどの回避策があります。しかし、文字列ではなく、JavaScriptでtrueまたはfalseを返すカスタムブール値属性を作成する方法があるといいでしょう。

Answer 1

を、あなたは

$("div").attr("data-intrusive"); 

ブール値を取得します。 attr（）は、属性の値を取得し、ブール値ではありません。 .ATTR（）データ-侵入の値を取得しようとしますが、データ・侵入DOM内の値を観察する場合には、空の文字列

<div data-intrusive="">1</div> 

あるでしょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div data-intrusive style="color:red" hidden>1</div> 

JS：

console.log($("div")[0].outerHTML) //output- <div data-intrusive="" style="color:red" hidden="">1</div> 

console.log($("div").prop('style'));// output-CSSStyleDeclaration {0: "color", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: ""…} 
console.log($("div").attr('style'));//output- color:red 


console.log($("div").prop('hidden'));//true 
console.log($("div").attr('hidden'));//hidden 

console.log($("div").attr('data-intrusive'));//empty string as expected 
console.log($("div").prop('data-intrusive'));//undefined as expected, as there is no property value 

に例えば以下の実施例

HTMLを検討

は、他のすべての属性のブール属性とプロパティ値のブール値を返します）（プロパ期待される結果を得るには、文字列値に対してhasAttribute（ 'data-intrusive'）を使用するか、またはデータを侵入するブール値をintに設定する.prop（ 'data-intrusive'）vブール

//if it is a string value 
console.log($("div")[0].hasAttribute('data-intrusive')); 

//if it is boolean ,then it is return the same 
$("div").prop('data-intrusive','fasle'); 
console.log($("div").prop('data-intrusive')); 

としてALUE Codepen - http://codepen.io/nagasai/pen/VjgNwx

Answer 2

は実際には、あなたが望む属性任意のカスタムを使用することができ、それが動作します：

console.log(document.querySelector('div').getAttribute('foo'));

<div foo="bar">My div</div>

技術的には、それが有効なHTMLマークアップではありません。カスタムアトリビュートをサポートする予定はなく、それはデータアトリビュートのために作られたものです。あなたは、属性を設定することができますし、コードでtrueするデータは、属性：

element.setAttribtue('teacher-can-interact', true); 
element.dataset['teacher-can-interact'] = true; 

しかし、彼らは常に文字列としてHTMLから解釈されます - それはそれはプログラミング言語ではありません、ちょうどHTMLの仕組みだと概念がありませんのデータ型。あなたはelement.hasAttribute("name"); を使用して、プレーンJavaScriptでこのfidddleをチェックアウトすることを行うことができます

Answer 3

：チェック選択し、無効化または非表示などのDOMプロパティのhttps://jsfiddle.net/7fax95ve/1/