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

当前回答

我只是无意中来到这里,我不明白为什么需要这么多代码来实现这一点。

使用字符串插值添加CSS代码。

Let styles = ' 字体大小:15他们; 颜色:红色; 变换:旋转(20度) document.querySelector(“*”)。样式=样式 一个

其他回答

我认为这是一种非常简单的解决上述所有问题的方法:

const elm = document.getElementById("myElement")

const allMyStyle = [
  { prop: "position", value: "fixed" },
  { prop: "boxSizing", value: "border-box" },
  { prop: "opacity", value: 0.9 },
  { prop: "zIndex", value: 1000 },
];

allMyStyle.forEach(({ prop, value }) => {
  elm.style[prop] = value;
});

创建一个函数来处理它,并将参数与你想要更改的样式传递给它。

function setStyle( objId, propertyObject )
{
 var elem = document.getElementById(objId);
 for (var property in propertyObject)
    elem.style[property] = propertyObject[property];
}

像这样叫它

setStyle('myElement', {'fontsize':'12px', 'left':'200px'});

对于propertyObject内部的属性值,您可以使用变量。

我们可以在Node原型中添加styles函数:

Node.prototype.styles=function(obj){ for (var k in obj)    this.style[k] = obj[k];}

然后,在任意节点上调用styles方法:

elem.styles({display:'block', zIndex:10, transitionDuration:'1s', left:0});

它将保留任何其他现有的样式,并覆盖对象参数中的值。

在某些情况下,使用CSS和javascript可能对解决这类问题更有意义。看看下面的代码:

document.getElementById("myElement").classList.add("newStyle");
document.getElementById("myElement").classList.remove("newStyle");

这只是简单地在CSS类之间切换,并解决了与重写样式相关的许多问题。它甚至使您的代码更加整洁。

<button onclick="hello()">Click!</button>

<p id="demo" style="background: black; color: aliceblue;">
  hello!!!
</p>

<script>
  function hello()
  {
    (document.getElementById("demo").style.cssText =
      "font-size: 40px; background: #f00; text-align: center;")
  }
</script>