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

Question

有一些css用数字定义的值，例如opacity

我知道在编写CSS时，我会这样做：

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

但是，当我要opacity使用javascript 进行修改时，我应该提供什么？只有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: ""

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