Javascript getElementById属性有hypen [重复]

Question

如果我使用属性“值”，一切正常。

document.getElementById("email").value = "Email already exists."

但是当我尝试使用带有连字符“-”的属性时，它不再起作用了

document.getElementById("email").data-error = "Email already exists."

我尝试过类似 ['data-error'] 或 ."data-error" 的变体，但似乎找不到正确的语法。

Answer 1

通过dataset对象获取一个data属性，通过data-后面的属性名部分获取属性（注意破折号转换为camelCase）。

在你的情况下，如果你想为数据属性设置一个值：

document.getElementById("email").dataset.error = "Email already exists."

来源：https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes

Answer 2

我猜你使用的是文本字段，value属性可以通过直接调用两种方式访问​​

document.getElementById("email").value = "Email already exists."

并通过使用 setAttribute。

document.getElementById("email").setAttribute("value", "value of text field");

所以要设置 data-error 的属性值，我们需要将其用作

document.getElementById("email").setAttribute("data-error", "Email already exists.");

并通过

获取属性值

document.getElementById("email").getAttribute("data-error");