设置没有值的属性答案

【问题标题】：Set attribute without value设置没有值的属性
【发布时间】：2012-10-20 23:37:06
【问题描述】：

如何在不添加值的情况下在 jQuery 中设置数据属性？我想要这个：

<body data-body>

我试过了：

$('body').attr('data-body'); // this is a getter, not working
$('body').attr('data-body', null); // not adding anything

其他所有内容似乎都将第二个参数添加为字符串。是否可以只设置一个没有值的属性？

【问题讨论】：

为什么需要data-body 和data-body=""？
至少如果你想使用 XHTML，你不应该这样做，因为 attribute minimization 是不允许的。
我不使用 XHTML，我使用 HTML5
@user1689607 因为我将生成的 HTML 保存为字符串，稍后需要进行反向查找。
@ExplosionPills 一个例子是用于 HTML5 表单验证的 required 属性。我敢肯定还有许多其他有效的用例。

标签： javascript jquery attributes attr

【解决方案1】：

attr() 函数也是一个 setter 函数。你可以只传递一个空字符串。

$('body').attr('data-body','');

空字符串只会创建没有值的属性。

<body data-body>

参考 - http://api.jquery.com/attr/#attr-attributeName-value

attr(属性名,值)

【讨论】：

+1，但 OP 知道它是一个二传手。传递一个空字符串有效但 null 并不令人惊讶。
Javasctipt has some weird behaviors。知道这些怪事发生在哪里会消除惊喜的元素：P
注意：这不适用于 jQuery 1.7.2（我知道这不是最新版本），但使用 $(el).prop('data-body', true) 对我有用，而 $(el).attr('data-body', '') 最终设置 data-body="data -body”对我来说。
@PatrickO'Doherty $(el).prop('data-body', true) 对我不起作用。 attr() 确实有效，但它还会添加一个空字符串作为我要添加的属性的值。
@Andrew 我相信您正在寻找removeAttr/prop 函数。这取决于您要删除的属性。

【解决方案2】：

或许可以试试：

var body = document.getElementsByTagName('body')[0];
body.setAttribute("data-body","");

【讨论】：

只有这个解决方案对我有用var btn = $(this).get(0); btn.setAttribute("disabled","");
在弄乱了 .attr 和 .prop 之后，就像这里所有其他解决方案和 cmets 中所建议的那样，我终于发现回到（或至少“中途”返回）原生 JS，做到了，就像上面评论中建议的那样......为此干杯！
body.setAttribute("data-body","");这将设置我的属性的'false'值，我如何设置属性的“”（空）值？

【解决方案3】：

接受的答案不再创建仅名称属性（截至 2017 年 9 月）。

您应该使用 JQuery prop() 方法来创建仅名称属性。

$(body).prop('data-body', true)

【讨论】：

实际上，我似乎将“value='true'”添加到我的选择选项中，而不仅仅是“value”。呃。
我想知道接受的答案如何不包含此解决方案！这是使用 jquery 最干净的方式。
不幸的是，在 Chrome 中的选择下拉选项中不起作用

【解决方案4】：

不用 jQuery 也能做到！

例子：

document.querySelector('button').setAttribute('disabled', '');

&lt;button&gt;My disabled button!&lt;/button&gt;

要设置布尔属性的值，例如禁用，您可以指定任何值。空字符串或属性名称是推荐值。重要的是，如果该属性完全存在，无论其实际值如何，它的值都被认为是真实的。该属性的缺失意味着其值为假。通过将 disabled 属性的值设置为空字符串 ("")，我们将 disabled 设置为 true，这会导致按钮被禁用。

来自MDN Element.setAttribute()

【讨论】：

jQuery 在这方面太脆弱了。最好用 javascript 来做，以免每次 jquery 或浏览器更改时都会让自己发疯。这适用于所有这些有缺陷的客户端框架。

【解决方案5】：

不确定这是否真的有益或为什么我更喜欢这种风格，但我所做的（在 vanilla js 中）是：

document.querySelector('#selector').toggleAttribute('data-something');

这将添加没有值的全小写属性，如果元素上已经存在，则将其删除。

https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute

【讨论】：

我还没有找到解决办法。在我的项目中，使用这种方法时，我仍然会得到 data-something=""。

【解决方案6】：

只要试试这个，它肯定会工作....

document.querySelector("audio").setAttribute("autoplay", "");

这将显示如下代码；-

<audio autoplay>

</audio>

如果你喜欢，

$("audio").attr("autoplay", "");

然后，这将显示如下代码；-

<audio autoplay="autoplay">

</audio>

【讨论】：