Set attribute without value
Question
How do I set a data attribute without adding a value in jQuery? I want this:
<body data-body>
I tried:
$('body').attr('data-body'); // this is a getter, not working
$('body').attr('data-body', null); // not adding anything
Everything else seems to add the second arguments as a string. Is it possible to just set an attribute without value?
7 answers
solution1
273 ACCPTED 2012-10-31 13:37:00
The attr() function is also a setter function. You can just pass it an empty string.
$('body').attr('data-body','');
An empty string will simply create the attribute with no value.
<body data-body>
Reference - http://api.jquery.com/attr/#attr-attributeName-value
attr( attributeName , value )
solution2
57 2012-10-31 13:37:58
Perhaps try:
var body = document.getElementsByTagName('body')[0];
body.setAttribute("data-body","");
solution3
25 2017-09-06 09:53:59
The accepted answer doesn't create a name-only attribute anymore (as of September 2017).
You should use JQuery prop() method to create name-only attributes.
$(body).prop('data-body', true)
solution4
14 2019-03-24 06:10:56
You can do it without jQuery!
Example:
document.querySelector('button').setAttribute('disabled', '');
<button>My disabled button!</button>
To set the value of a Boolean attribute, such as disabled, you can specify any value. An empty string or the name of the attribute are recommended values. All that matters is that if the attribute is present at all, regardless of its actual value, its value is considered to be true. The absence of the attribute means its value is false. By setting the value of the disabled attribute to the empty string (""), we are setting disabled to true, which results in the button being disabled.
solution5
8 2020-03-05 04:29:00
Not sure if this is really beneficial or why I prefer this style but what I do (in vanilla js) is:
document.querySelector('#selector').toggleAttribute('data-something');
This will add the attribute in all lowercase without a value or remove it if it already exists on the element.
https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute
solution6
2 2021-06-01 06:49:26
simply try this, it will definately work....
document.querySelector("audio").setAttribute("autoplay", "");
this will showed like below code;-
<audio autoplay>
</audio>
if you wrote like,
$("audio").attr("autoplay", "");
then, this will showed like below code;-
<audio autoplay="autoplay">
</audio>
solution7
0 2022-09-16 20:25:10
We have a lot of good answers here.
But, you have to see that inside Firefox it gives you data-body="" and inside Chrome it gives you data-body only.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.