Setting a false value or deleting an attribute

Question

I read something about the boolean attribute here , which says that for a boolean attribute (in this particular example, the loop <audio> attribute), no matter what value you set, it will be recognized as "true". To really set a false, you cannot set it as loop=false or with javascript like ['loop']=false , but you must remove the attribute, for example by running removeAttribute('loop') . It's true?

I believed at first, but as far as it is tested in Chrome, it seems that setting to ['loop']=false really make it be recognized as false. I'm not sure how stable this is when considered cross-browser. Is there a difference between browsers?

Answer 1

The logical attributes are described here:

http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2

Some attributes play the role of logical variables (for example, the selected attribute for an OPTION element). Their appearance in the element start tag means that the attribute value is "true". Their absence implies a value of "false".

Logical attributes can legally take one value: the name of the attribute (for example, selected = "selected").

So, although some browsers may interpret the string “false” as if the value had not been set, others may not decide (which is the correct behavior). In fact, as far as I know (or thought), any non-empty string usually sets the value to on / true (no matter what the spec says, is a legal value). I believe this is also undefined behavior, so it can also change or be different from browser to browser (do not rely on it).

The bottom line is that a browser or two may deviate from the specification does not mean you should. Rejecting the entire attribute is the way to go.

Addition . If you look at your comments and ask a question a little closer, I think you might be confused about attribute values ​​in general. In HTML, attr=false and attr="false" exactly the same. Quotes are not required in any version of HTML (unless they are needed to disambiguate when the value contains spaces). For instance:

 <input class=required> <!-- This is fine --> <input class=title required> <!-- this is fine too, but "required" will be parsed as an attribute --> <input class="title required"> <!-- To have two classes, we need the quotes --> 

All attribute values ​​(for elements that have them) are treated as strings. In other words, in HTML there is no such thing as a true Boolean value (or NULL value), as in javascript.

Answer 2

Just like that, who needs it in the future:

loop=false remains true if the entire loop attribute is not removed. Basically, having only loop is what the tag should do something else. You need to use something like jQuery to remove the entier loop attribute (or at least what I will do). Now, if you set the other undefined attribute to false , you can recognize it as false .

Answer 3

The audio element is an HTML5 element, so you should familiarize yourself with the HTML5 drafts regarding its meaning. In this case, see the definition of logical attributes in the developer version of the WHATWG project. It actually says: a) that the presence or absence of an attribute determines whether the value of the DOM attribute is true or false , and b) as a requirement for documents, the value should be empty or (case insensitive) the attribute name, in this case loop='' or loop="loop" . The use of quotation marks around a value is defined elsewhere.

Thus, browsers should recognize loop=false in the same way as loop=loop or loop=true , but authors should not use such constructions, and HTML5 checkers generate error messages.

(Basically, you should only use loop in serializing HTML HTML5 and loop="loop" in serializing XHTML.)

So, if you have an x variable in JavaScript with an audio element object as its value, x.loop is true or false , while x.attributes['loop'].value indicates the value used in the HTML markup (which usually not interesting as such).

This is another complication regarding Firefox: it still does not support the loop attribute (see HTML5 Audio Looping question). This means that if you set, for example, loop="loop" , x.attributes['loop'].value will be loop , but Firefox does not even set x.loop (i.e. it is undefined ), however it implements functionality.

Answer 4

You are misleading strings and real Boolean types. Javascript has a Boolean data type with two possible values ​​true and false (without quotes). Lines can contain any text, so they can contain "true" and "false" with quotes. Setting the property to a value other than zero and not false gives true, so the following will be accour:

 var a = true; // true var b = false; // false var c = "true"; // true var d = "false" // true var e = null; // false; var f = 0; // false var g = 1; // true 

Note the resemblance to C.