javascript - 使用 javascript 设置样式值时的数字或字符串

Question

有些css值是用数字定义的，比如opacity

我知道在编写 css 时，我会这样做:

#element {
  opacity: 1; /* without a quote mark, just 1 */
}

但是当我要用 javascript 修改 opacity 时，我应该提供什么？只有 0.5 或 "0.5" ?

如果我运行:

typeof document.getElementById('element').style.opacity // returns "srting"

所以我过去常常在修改它的时候提供字符串。 但是有人审查我的代码，建议我提供如下数字:

document.getElementById('element').style.opacity = 0.5

在使用 javascript 修改它时实际应该使用什么类型？字符串还是数字？

Answer 1

所有 css 值都是字符串(从技术上讲，DOMString)，因此在您更改它们时也使用字符串更干净。不过，您可以直接使用数字(或其他任何内容)，JS 只会为您执行 .toString() 。

然而，css 中只有少数无单位属性，对于其他数字 Prop ，您需要提供一个单位，而裸数字将是一个错误:

 style.opacity = "0.5" // fine
 style.opacity = 0.5   // fine

 style.width = "3px" // fine
 style.width = 3     // wrong!

所以我养成了习惯，总是在 css 中使用字符串。

此外，document.getElementById('element').style 返回一个巨大的对象，其中包含所有可能的 css 属性及其字符串值:

例子:

alignContent: ""
alignItems: ""
alignSelf: ""
alignmentBaseline: ""
all: ""
animation: ""
animationDelay: ""

在您的浏览器控制台中的一个有效元素上尝试它，您会看到它。 所以我建议使用字符串。