简洁版本
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.getAttribute
和element.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”,您错误地将其设置为String对象,而不是它所需的HtmlAttribute对象:
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
直接与收集者交谈。您不是在操纵属性的值,而是在操纵代表属性本身的对象。
需要怎么设置?
设置required
属性的正确方法是什么?您有两种选择,要么是反射属性,要么是通过正确设置属性:
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!
使用反射.required
属性时,您还可以使用任何“falsey”值将其关闭,并使用真值将其打开。但为了清楚起见,请坚持真假。
如何检查的required
?
通过.hasAttribute("required")
方法检查属性是否存在:
if (edName.hasAttribute("required"))
{
}
您还可以通过布尔反射.required
属性进行检查 :
if (edName.required)
{
}