精简版

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")

==========================   ===============  =========================

false (Boolean)  null (Object)

true  (Boolean)  "" (String)

true  (Boolean)  "" (String)

true  (Boolean)  "required" (String)

true  (Boolean)  "true" (String)

true  (Boolean)  "false" (String)

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”值将其关闭，并使用truthy值将其打开。但为了清晰起见，坚持真假。

如何检查的required？

通过以下.hasAttribute("required")方法检查属性是否存在：

if (edName.hasAttribute("required"))

{

}

您还可以通过布尔反射.required属性检查它 ：

if (edName.required)

{

}