设置没有值的属性

发布于 2025-01-12 15:46:40 字数 291 浏览 2 评论 0原文

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

<body data-body>

我尝试过：

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

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

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深海夜未眠 2025-01-19 15:46:40

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

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

空字符串将简单地创建没有值的属性。

<body data-body>

参考 - http://api.jquery.com/attr/#attr-attributeName-value
attr( 属性名称 , 值 )

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 )

回复收藏 0 原文

懷念過去 2025-01-19 15:46:40

也许尝试：

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

Perhaps try:

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

回复收藏 0 原文

私野 2025-01-19 15:46:40

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

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

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

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)

回复收藏 0 原文

゛清羽墨安 2025-01-19 15:46:40

不用 jQuery 也能做到！

例子：

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

<button>My disabled button!</button>

要设置布尔属性的值，例如禁用，可以指定任何值。建议使用空字符串或属性名称。重要的是，如果属性确实存在，无论其实际值如何，它的值都被认为是 true。缺少该属性意味着其值为 false。通过将disabled属性的值设置为空字符串（“”），我们将disabled设置为true，这会导致按钮被禁用。
来自MDN Element.setAttribute()< /p>

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.
From MDN Element.setAttribute()

回复收藏 0 原文

椵侞 2025-01-19 15:46:40

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

// Add
document.querySelector('#selector')
    .toggleAttribute('data-something', true);

// Remove
document.querySelector('#selector')
    .toggleAttribute('data-something', false);

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

这可能会以全小写形式添加没有值的属性，或者如果元素上已存在该属性，则将其删除。

语法...
toggleAttribute(名称, 力)
参数...
- 强制 可选
具有以下效果的布尔值：
如果根本没有指定，toggleAttribute 方法会“切换”
名为 name 的属性 — 如果存在则删除它，否则添加它
如果它不存在，如果 true，toggleAttribute 方法会添加一个
名为 name 的属性如果为 false，toggleAttribute 方法会删除
名为 name 的属性

来源： toggleAttribute

Not sure if this is really beneficial or why I prefer this style but what I do (in vanilla js) is:

// Add
document.querySelector('#selector')
    .toggleAttribute('data-something', true);

// Remove
document.querySelector('#selector')
    .toggleAttribute('data-something', false);

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

This may add the attribute in all lowercase without a value or remove it if it already exists on the element.

Syntax...
toggleAttribute(name, force)
Parameters...
- force Optional
A boolean value which has the following effects:
if not specified at all, the toggleAttribute method "toggles" the
attribute named name — removing it if it is present, or else adding it
if it is not present if true, the toggleAttribute method adds an
attribute named name if false, the toggleAttribute method removes the
attribute named name

Source: toggleAttribute

回复收藏 0 原文

衣神在巴黎 2025-01-19 15:46:40

只需尝试一下，它肯定会工作......

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

这将显示如下代码；-

<audio autoplay>

</audio>

如果你写的是,

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

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

<audio autoplay="autoplay">

</audio>

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>

回复收藏 0 原文

星軌x 2025-01-19 15:46:40

我们这里有很多好的答案。

但是，您必须看到在 Firefox 内部它为您提供data-body=""，而在 Chrome 内部它为您提供data-仅正文。

回复收藏 0 原文

栖迟 2025-01-19 15:46:40

这在 HTML 中是不可能的。

属性必须有一个值

根据 HTML 标准：

属性有名称和值...属性值是文本和字符引用的混合，但文本不能包含不明确的 & 符号这一附加限制除外。

为什么我看到属性没有值？

您在 HTML 代码中看到没有值的属性的原因是 HTML 标准规定：

空属性语法
只是属性名称。
该值隐式为空字符串。

因此，只是的缩写形式。

那我该怎么办呢？

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

（如果您能够使用现代 JS，您应该简单地调用 document.body.setAttribute("data-body", "")。）

您的浏览器元素检查器可以自由地将属性显示为 <代码>data-body (Chrome) 或data-body="" (Firefox)。

（缩短并改编自 https://8hob.io/posts/在 js 中设置无值属性/）

This is impossible in HTML.

Attributes must have a value

According to the HTML standard:

Attributes have a name and a value... Attribute values are a mixture of text and character references, except with the additional restriction that the text cannot contain an ambiguous ampersand.