我有以下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和javascript可能对解决这类问题更有意义。看看下面的代码:
document.getElementById("myElement").classList.add("newStyle");
document.getElementById("myElement").classList.remove("newStyle");
这只是简单地在CSS类之间切换，并解决了与重写样式相关的许多问题。它甚至使您的代码更加整洁。
其他回答
如果你的CSS值为字符串，并且没有为元素设置其他CSS(或者你不关心覆盖)，请使用cssText属性:
document.getElementById("myElement").style.cssText = "display: block; position: absolute";
你也可以使用模板文字来获得更简单、更可读的多行css语法:
document.getElementById("myElement").style.cssText = `
display: block;
position: absolute;
`;
这在某种意义上是好的，因为它避免了每次更改属性时重新绘制元素(以某种方式“一次性”更改所有属性)。
另一方面，你必须先构建字符串。
实现这一目标的不同方法:
1. document.getElementById("ID").style.cssText = "display:block; position:relative; font-size:50px";
2. var styles = {"display":"block"; "position":"relative"; "font-size":"50px"};
var obj = document.getElementById("ID");
Object.assign(obj.style, styles);
3. var obj = document.getElementById("ID");
obj.setAttribute("style", "display:block; position:relative; font-size:50px");
希望这对RDaksh有帮助
请考虑使用CSS添加样式类，然后用JavaScript添加该类 classList &简单的add()函数。
style.css
.nice-style {
fontsize : 12px;
left: 200px;
top: 100px;
}
JavaScript脚本
const addStyle = document.getElementById("myElement"); addStyle.classList.add(“nice-style”);
最好的办法是创建一个函数来自己设置样式:
var setStyle = function(p_elem, p_styles)
{
var s;
for (s in p_styles)
{
p_elem.style[s] = p_styles[s];
}
}
setStyle(myDiv, {'color': '#F00', 'backgroundColor': '#000'});
setStyle(myDiv, {'color': mycolorvar, 'backgroundColor': mybgvar});
请注意，您仍然必须使用javascript兼容的属性名称(因此使用backgroundColor)
在对象中使用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> .
