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

当前回答

在对象中使用CSSStyleDeclaration.setProperty()方法。样式对象的条目。 我们也可以用这个来设置CSS属性的优先级(“重要”)。 我们将使用“连字符”的CSS属性名。

Const styles = { “字体大小”:“18 px”, “粗细”:“大胆”, “背景颜色”:“lightgrey”, 颜色:“红”, "padding": "10px !important", 保证金:“20 px”, 宽度:“100px !重要”, 边框:1px纯蓝色 }; const elem = document.getElementById("my_div"); Object.entries(风格)。forEach(([prop, val]) => { Const [value, pri = ""] = val.split("!"); elem.style。setProperty(prop, value, pri); }); <div id="my_div"> Hello </div> .

其他回答

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

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

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

对我来说最简单的方法就是使用字符串/模板字面值:

elementName.style.cssText = `
                                width:80%;
                                margin: 2vh auto;
                                background-color: rgba(5,5,5,0.9);
                                box-shadow: 15px 15px 200px black; `;

伟大的选择,因为你可以使用多行字符串,使生活更容易。

查看字符串/模板文字在这里:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

var styles = {
    "background-color": "lightgray",
    "width": "500px",
    "height": "300px"
};

/

var obj = document.getElementById("container");
Object.assign(obj.style, styles);

您可以在css文件中拥有单独的类,然后将类名分配给元素

或者你可以循环样式的属性为-

var css = { "font-size": "12px", "left": "200px", "top": "100px" };

for(var prop in css) {
  document.getElementById("myId").style[prop] = css[prop];
}

不要认为这是可能的。

但是你可以用样式定义创建一个对象,然后循环遍历它们。

var allMyStyle = {
  fontsize: '12px',
  left: '200px',
  top: '100px'
};

for (i in allMyStyle)
  document.getElementById("myElement").style[i] = allMyStyle[i];

为了进一步开发,为它创建一个函数:

function setStyles(element, styles) {
  for (i in styles)
    element.style[i] = styles[i];
}

setStyles(document.getElementById("myElement"), allMyStyle);