我有以下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> .
对我来说最简单的方法就是使用字符串/模板字面值:
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 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);