我该如何在jQuery中设置一个不带值的数据属性？我想要实现这个效果：
<body data-body>
我尝试过：
$('body').attr('data-body'); // this is a getter, not working
$('body').attr('data-body', null); // not adding anything
其他的操作似乎将第二个参数作为字符串添加。是否有可能只设置一个没有值的属性？
设置没有值的属性
257
- David Hellsing
8
7个回答
303
attr() 函数也是一个设置器函数。你可以传递一个空字符串。$('body').attr('data-body','');
一个空字符串将只会创建一个没有值的属性。
<body data-body>
参考文献 - http://api.jquery.com/attr/#attr-attributeName-value
attr( 属性名称 , 值 )
- Lix
6
27+1，但OP知道这是一个setter。传递空字符串可以工作，但传递null则有些令人惊讶。 - Jon
2JavaScript 有一些奇怪的行为（http://www.youtube.com/watch?v=kXEgk1Hdze0）。了解这些怪异之处将消除惊喜的元素 :P - Lix
25注意：这在jQuery 1.7.2中不起作用（我知道那不是最新版本），但对我来说，使用
$(el).prop('data-body', true)可行，而使用$(el).attr('data-body', '')会将data-body设置为"data-body"。 - Patrick O'Doherty6
$(el).prop('data-body', true) 对我无效。attr() 可以工作，但它还会将一个空字符串作为属性值添加。 - Webdevotion如何删除空属性？ - Andrew
66
或许可以尝试：
var body = document.getElementsByTagName('body')[0];
body.setAttribute("data-body","");
- Cal McLean
3
2只有这个解决方案对我有效：
var btn = $(this).get(0); btn.setAttribute("disabled",""); - gkiko1在尝试了所有其他解决方案和评论中建议的.attr和.prop之后，我最终发现回到（或至少“半路”回到）本机JS可以解决问题，就像上面的评论建议的那样...感谢！ - TheCuBeMan
2
body.setAttribute("data-body",""); 这将设置我的属性的“false”值，如何设置属性的“”（空）值？ - Archana Sharma27
- Charlie
3
实际上，我似乎是在我的选择选项中添加了“value ='true'”，而不仅仅是“value”。唉。 - RonLugge
我在想为什么被接受的答案中没有包含这个解决方案！这是使用 jQuery 最简洁的方式。 - denns
在Chrome中，选择下拉选项无法正常工作。很遗憾。 - MC9000
18
您可以不使用jQuery来实现！
示例：
document.querySelector('button').setAttribute('disabled', '');<button>My disabled button!</button>为了设置布尔属性的值，比如 disabled，你可以指定任何值。推荐使用空字符串或者属性名作为值。重要的是，如果这个属性存在，则无论其实际值是什么，它的值都被认为是 true。如果没有该属性，则意味着其值为 false。通过将 disabled 属性的值设置为空字符串（""），我们将 disabled 设置为 true，导致按钮被禁用。
- LipESprY
1
2jQuery在这方面太不可靠了。最好用JavaScript来做，否则每次jQuery或浏览器更改时都会让自己发疯。对于所有这些有缺陷的客户端框架都是如此。 - MC9000
15
我不确定这是否真的有益，也不知道为什么我喜欢这种风格，但我所做的（在纯js中）是：
document.querySelector('#selector').toggleAttribute('data-something');
这将在元素中添加一个小写的属性名，如果该属性已存在，则删除该属性。
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/toggleAttribute
- Brent N.
2
1我仍然没有找到解决方案。在我的项目中，当使用这种方法时，我仍然会得到 data-something="" 的数据。 - fonzane
这是唯一有效的解决方案，否则其他所有东西都会抛出以下错误：
错误：<element>属性宽度：属性意外结束。预期长度，""。 - Nobody
5
只需尝试以下代码，它一定会起作用...
document.querySelector("audio").setAttribute("autoplay", "");
这将显示如下代码：
<audio autoplay>
</audio>
如果你写了类似以下代码：
$("audio").attr("autoplay", "");
那么，它将会显示为下面的代码：<audio autoplay="autoplay">
</audio>
- veer vikram
4
我们这里有很多好的答案。
但是，你需要看到在Firefox内部它会给你data-body = ""，而在Chrome内部它只会给你data-body。
- buggggerMan
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
data-body和data-body=""？ - Explosion Pillsrequired属性。我相信还有许多其他有效的用例。 - Zero3<body itemscope itemtype="http://schema.org/WebPage">。 - WimVO