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

javascript coding-style

2022-08-30 00:18:10

我有以下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

答案 1

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

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

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

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

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

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

答案 2

Object.assign(yourelement.style,{fontsize:"12px",left:"200px",top:"100px"});

这还使您能够合并样式，而不是重写 CSS 样式。

您还可以创建快捷方式功能：

const setStylesOnElement = function(styles, element){
    Object.assign(element.style, styles);
}