有没有办法使用JavaScript向元素添加空白数据属性？

Question

我想用 JavaScript 创建一个如下所示的元素：

<div data-boolean-attribute></div>

将

null

或

undefined

传递给

setAttribute()

或

dataset

属性会产生文字字符串

'null'

和

'undefined'

的值。将空字符串或数组传递给任一方法都会产生空字符串值：

<div data-boolean-attribute=""></div>

是否可以使用 innerHTML 之类的东西在普通 JavaScript

without

中创建一个完全空的数据属性？

Answer 1

在 Chrome 中，同时使用 dataset 和 setAttribute 可以让您传递空字符串，并且不会添加值。

const test = document.querySelector("#test")
test.dataset.testa = "";
test.setAttribute("data-testB","");
console.log(test)

<div id="test">TEST</div>

Answer 2

创建一个新的 div 元素，然后将 data attr 设置为空字符串，并将其附加到 DOM body。

const div = document.createElement('div');
div.dataset.booleanAttribute = '';
document.body.appendChild(div);

Answer 3

这在 HTML 中是不可能的。

属性必须有一个值

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

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

空属性语法

只是属性名称。

该值隐式为空字符串。

因此，

<div data-boolean-attribute></div>

只是

<div data-boolean-attribute=""></div>

的缩写形式。

在现代 JS 中，您应该简单地调用

setAttribute("data-boolean-attribute", "")

。您的浏览器元素检查器可以自由地将属性显示为

data-body

(Chrome) 或

data-body=""

(Firefox)。