Wie setze ich das HTML5-Attribut in Javascript?

Kurze version

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

Lange Version

Einmal T. J. Crowder geschafft hinweisen reflektiert Eigenschaften, habe ich gelernt, dass folgende syntax ist falsch:

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

Du muss gehen durch element.getAttribute und element.setAttribute:

element.getAttribute("foo");         //correct
element.setAttribute("foo", "test"); //correct

Dies ist, weil das Attribut enthält tatsächlich eine Besondere HtmlAttribute Objekt:

element.attributes["foo"];           //returns HtmlAttribute object, not the value of the attribute
element.attributes.foo;              //returns HtmlAttribute object, not the value of the attribute

Durch das setzen eines Attributs auf den Wert "true", werden Sie versehentlich die Einstellung einer String Objekt, sondern als die HtmlAttribute Objekt es erfordert:

element.attributes["foo"] = "true";  //error because "true" is not a HtmlAttribute object
element.setAttribute("foo", "true"); //error because "true" is not an HtmlAttribute object

Konzeptionell die richtige Idee (ausgedrückt in einer typisierten Sprache), ist:

HtmlAttribute attribute = new HtmlAttribute();
attribute.value = "";
element.attributes["required"] = attribute;

Deshalb:

• getAttribute(name)
• setAttribute(name, value)

vorhanden. Sie tun die Arbeit, die auf die Zuweisung des Wertes zu der HtmlAttribute Objekt innerhalb.

Am Anfang dieser, einige attribute sind reflektiert. Dies bedeutet, dass Sie zugreifen können, die Sie mehr schön aus 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;

Was Sie nicht tun möchten, ist versehentlich benutzen Sie die .attributes Sammlung:

element.attributes.required = true;     //WRONG!
if (element.attributes.required) {...}  //WRONG!
element.attributes.required = false;    //WRONG!

Testfällen

Führte dies zu testen, um die Verwendung eines required Attribut, vergleichen Sie die zurückgegebenen Werte durch das Attribut und die Eigenschaft spiegelt sich

document.getElementById("name").required;
document.getElementById("name").getAttribute("required");

Ergebnisse:

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)

Versuchen auf die .attributes Sammlung direkt falsch ist. Es gibt das Objekt, das Sie repräsentiert das DOM-Attribut:

edName.attributes["required"] => [object Attr]
edName.attributes.required    => [object Attr]

Dies erklärt, warum Sie sollten nie die Rede, um die .attributes direkt sammeln. Du bist nicht die Manipulation des Werte der Attribute, sondern die Objekte, welche die Attribute selbst.

Wie erforderlich?

Was ist der richtige Weg, um required auf ein Attribut? Sie haben zwei Möglichkeiten, entweder das reflektierte Eigenschaft, oder durch das korrekte festlegen der attribute:

element.setAttribute("required", "");         //Correct
edName.required = true;                       //Correct

Streng genommen, jeder andere Wert wird "set" - Attribut. Aber die definition von Boolean Attribute vorschreiben, und es sollte nur auf eine leere Zeichenfolge festgelegt "" zu zeigen wahr. Die folgenden Methoden alle arbeiten, um set die required Boolean Attribut,

aber nicht verwenden Sie:

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

Wir bereits gelernt, dass der Versuch, das Attribut direkt falsch ist:

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

Wie klar erforderlich?

Den trick, wenn Sie versuchen zu entfernen die required Attribut ist, dass es leicht versehentlich einschalten:

edName.removeAttribute("required");     //Correct
edName.required = false;                //Correct

Mit der unwirksamen Möglichkeiten:

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!

Bei Verwendung des reflektierten .required - Eigenschaft, Sie können aber auch beliebige "falsey" Werte, um Sie auszuschalten, und truthy Werte, um es einzuschalten. Aber stecken Sie nur auf true und false für Klarheit.

Wie überprüfen für required?

Überprüfen Sie das Vorhandensein des Attributs durch die .hasAttribute("required") Methode:

if (edName.hasAttribute("required")
{
}

Können Sie auch überprüfen Sie es durch die Boolean reflektiert .required Eigenschaft:

if (edName.required)
{
}

InformationsquelleAutor der Antwort Ian Boyd

Was wichtig ist, ist nicht das Attribut, sondern die Eigenschaft, und sein Wert ist ein boolescher Wert.

Können Sie es mit

 document.getElementById("edName").required = true;

InformationsquelleAutor der Antwort Denys Séguret