Menu
To set an attribute without a value, select the element and call the setAttribute() method on it, e.g. button. setAttribute('disabled', '') . If we pass an empty string as a second parameter to the setAttribute method, the attribute is set without a value.
Note: Attribute values are generally case-insensitive, except certain attribute values, like the id and class attributes. However, World Wide Web Consortium (W3C) recommends lowercase for attributes values in their specification.
We Suggest: Always Quote Attribute ValuesThe HTML standard does not require quotes around attribute values. However, W3C recommends quotes in HTML, and demands quotes for stricter document types like XHTML.
The data-* attribute is used to store custom data private to the page or application. The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.
Yes, perfectly valid. In your case, data-modal-target would represent a boolean attribute:
2.4.2 Boolean attributes
The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
Valid, but they aren't boolean.
Custom data attributes specification doesn't mention any changes to empty attributes handling, so the general rules about empty attributes apply here:
Certain attributes may be specified by providing just the attribute name, with no value.
In the following example, the
disabledattribute is given with the empty attribute syntax:<input disabled>Note that empty attribute syntax is exactly equivalent to specifying the empty string as the value for the attribute, as in the following example.
<input disabled="">
So you are allowed to use empty custom data attributes, but special handling is needed to use them as boolean.
When you are accessing an empty attribute, its value is "". Since it's a falsy value, you can't just use if (element.dataset.myattr) to check whether an attribute is present.
You should use element.hasAttribute('myattr') or if (element.dataset.myattr !== undefined) instead.
Lloyd's answer is wrong. He mentions link to boolean attributes microsyntax, but data-* attributes are not specified as boolean in the spec.
Yes, it is valid syntax to omit value for a custom data attribute.
"Attributes can be specified in four different ways:
Empty attribute syntax Just the attribute name. The value is implicitly the empty string. [...]" https://developers.whatwg.org/syntax.html#attributes-0
On one hand, it passes the validator 16.5.7 https://validator.w3.org/nu/#textarea :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>a</title>
</head>
<body data-asdf>
</body>
</html>
On the other, HTML5 does not say in the specification of data- attributes that they are boolean: https://www.w3.org/TR/html5/dom.html#custom-data-attribute while it says that very clearly for other boolean attributes like checked https://www.w3.org/TR/html5/forms.html#attr-input-checked
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With