我有以下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(“*”)。样式=样式 一个
其他回答
下面的innerHtml是否有效
var styleElement = win.document.createElement("STYLE"); styleElement。innerHTML = "#notEditableVatDisplay {display:inline-flex} #editableVatInput，.print-section, i.a a.fa-sort. "点击排序{显示:none !重要}";
JavaScript库允许您非常轻松地完成这些工作
jQuery
$('#myElement').css({
font-size: '12px',
left: '200px',
top: '100px'
});
对象和for-in循环
或者，一个更优雅的方法是一个基本对象& for循环
var el = document.getElementById('#myElement'),
css = {
font-size: '12px',
left: '200px',
top: '100px'
};
for(i in css){
el.style[i] = css[i];
}
在对象中使用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> .
不要认为这是可能的。
但是你可以用样式定义创建一个对象，然后循环遍历它们。
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);
使用ES6+，你也可以使用反引号，甚至直接从某个地方复制css:
const $div = document.createElement('div') 美元的div。innerText = 'HELLO' div.style美元。cssText = ' Background-color: rgb(26, 188, 156); 宽度:100 px; 高度:30 px; border - radius: 7 px; text-align:中心; padding-top: 10 px; 粗细:大胆的; ｀ document.body.append (div)美元
