短縮版
element.setAttribute("required", ""); //turns required on
element.required = true; //turns required on through reflected attribute
jQuery(element).attr('required', ''); //turns required on
$("#elementId").attr('required', ''); //turns required on
element.removeAttribute("required"); //turns required off
element.required = false; //turns required off through reflected attribute
jQuery(element).removeAttr('required'); //turns required off
$("#elementId").removeAttr('required'); //turns required off
if (edName.hasAttribute("required")) { } //check if required
if (edName.required) { } //check if required using reflected attribute
ロングバージョン
TJ Crowder が反映されたプロパティを指摘すると、次の構文が間違っていることがわかりました。
element.attributes["name"] = value; //bad! Overwrites the HtmlAttribute object
element.attributes.name = value; //bad! Overwrites the HtmlAttribute object
value = element.attributes.name; //bad! Returns the HtmlAttribute object, not its value
value = element.attributes["name"]; //bad! Returns the HtmlAttribute object, not its value
あなたは通過しなければなりません：element.getAttributeelement.setAttribute
element.getAttribute("foo"); //correct
element.setAttribute("foo", "test"); //correct
これは、属性に実際には特別なHtmlAttributeオブジェクトが含まれているためです。
element.attributes["foo"]; //returns HtmlAttribute object, not the value of the attribute
element.attributes.foo; //returns HtmlAttribute object, not the value of the attribute
属性値を「true」に設定すると、必要なHtmlAttributeオブジェクトではなく、誤ってStringオブジェクトに設定されます。
element.attributes["foo"] = "true"; //error because "true" is not a HtmlAttribute object
element.setAttribute("foo", "true"); //error because "true" is not an HtmlAttribute object
概念的に正しい考え方 (型付き言語で表現) は次のとおりです。
HtmlAttribute attribute = new HtmlAttribute();
attribute.value = "";
element.attributes["required"] = attribute;
これが理由です：
getAttribute(name)setAttribute(name, value)
存在。内部の HtmlAttribute オブジェクトに値を割り当てる作業を行います。
その上で、いくつかの属性が反映されます。これは、Javascript からより適切にアクセスできることを意味します。
//Set the required attribute
//element.setAttribute("required", "");
element.required = true;
//Check the attribute
//if (element.getAttribute("required")) {...}
if (element.required) {...}
//Remove the required attribute
//element.removeAttribute("required");
element.required = false;
あなたがしたくないことは、誤って.attributesコレクションを使用することです:
element.attributes.required = true; //WRONG!
if (element.attributes.required) {...} //WRONG!
element.attributes.required = false; //WRONG!
テストケース
これにより、required属性の使用に関するテストが行われ、属性を介して返される値と反映されたプロパティが比較されました。
document.getElementById("name").required;
document.getElementById("name").getAttribute("required");
結果:
HTML .required .getAttribute("required")
========================== =============== =========================
<input> false (Boolean) null (Object)
<input required> true (Boolean) "" (String)
<input required=""> true (Boolean) "" (String)
<input required="required"> true (Boolean) "required" (String)
<input required="true"> true (Boolean) "true" (String)
<input required="false"> true (Boolean) "false" (String)
<input required="0"> true (Boolean) "0" (String)
.attributesコレクションに直接アクセスしようとするのは間違っています。DOM 属性を表すオブジェクトを返します。
edName.attributes["required"] => [object Attr]
edName.attributes.required => [object Attr]
.attributesこれは、 collect と直接対話してはならない理由を説明しています。属性の値を操作するのではなく、属性自体を表すオブジェクトを操作します。
必須の設定方法は？
required属性を設定する正しい方法は何ですか? 反映されたプロパティを使用するか、属性を正しく設定するかの 2 つの選択肢があります。
element.setAttribute("required", ""); //Correct
edName.required = true; //Correct
厳密に言えば、他の値は属性を「設定」します。Booleanただし、属性の定義では、true""を示すために空の文字列にのみ設定する必要があると規定されています。次のメソッドはすべて、ブール属性を設定するために機能 します。required
しかし、それらを使用しないでください:
element.setAttribute("required", "required"); //valid, but not preferred
element.setAttribute("required", "foo"); //works, but silly
element.setAttribute("required", "true"); //Works, but don't do it, because:
element.setAttribute("required", "false"); //also sets required boolean to true
element.setAttribute("required", false); //also sets required boolean to true
element.setAttribute("required", 0); //also sets required boolean to true
属性を直接設定しようとするのは間違っていることはすでに学びました。
edName.attributes["required"] = true; //wrong
edName.attributes["required"] = ""; //wrong
edName.attributes["required"] = "required"; //wrong
edName.attributes.required = true; //wrong
edName.attributes.required = ""; //wrong
edName.attributes.required = "required"; //wrong
必須クリア方法は？
アトリビュートを削除しようとするときの秘訣は、required誤ってオンにしてしまうことです。
edName.removeAttribute("required"); //Correct
edName.required = false; //Correct
無効な方法で:
edName.setAttribute("required", null); //WRONG! Actually turns required on!
edName.setAttribute("required", ""); //WRONG! Actually turns required on!
edName.setAttribute("required", "false"); //WRONG! Actually turns required on!
edName.setAttribute("required", false); //WRONG! Actually turns required on!
edName.setAttribute("required", 0); //WRONG! Actually turns required on!
.requiredReflectedプロパティを使用する場合、「falsey」値を使用してオフにし、truey 値を使用してオンにすることもできます。ただし、わかりやすくするために true と false に固執してください。
を確認する方法はrequired?
.hasAttribute("required")メソッドを使用して属性の存在を確認します。
if (edName.hasAttribute("required"))
{
}
ブール値のReflected.requiredプロパティで確認することもでき ます。
if (edName.required)
{
}
