如何在 JavaScript 中设置多种 CSS 样式？

小编典典

all

我有以下 JavaScript 变量：

var fontsize = "12px"
var left= "200px"
var top= "100px"

我知道我可以像这样迭代地将它们设置为我的元素：

document.getElementById("myElement").style.top=top
document.getElementById("myElement").style.left=left

是否可以一次将它们全部设置在一起，像这样？

document.getElementById("myElement").style = allMyStyle

阅读 131

2022-05-16

共1个答案

小编典典

如果您将 CSS 值作为字符串并且没有为元素设置其他
CSS（或者您不关心覆盖），请使用该cssText属性：

document.getElementById("myElement").style.cssText = "display: block; position: absolute";

您还可以使用模板文字来获得更简单、更易读的多行 CSS 类语法：

document.getElementById("myElement").style.cssText = `
  display: block; 
  position: absolute;
`;

从某种意义上说，这很好，因为它避免了每次更改属性时都重新绘制元素（以某种方式“一次”更改它们）。

另一方面，您必须先构建字符串。

2022-05-16