使用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 s），因此在更改字符串时也可以使用字符串。不过，您可以直接使用数字（或其他任何数字），JS只会为您做.toString()。

但是，css中只有几个无单位属性，对于其他数字道具，您需要提供一个单位，而裸数字则是一个错误：

 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: ""

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