我有以下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
当前回答
使用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)美元
其他回答
我认为这是一种非常简单的解决上述所有问题的方法:
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;
});
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];
}
强类型的typescript:
对象。Assign方法很好，但是使用typescript你可以像这样自动完成:
const newStyle: Partial<CSSStyleDeclaration> =
{
placeSelf: 'centered centered',
margin: '2em',
border: '2px solid hotpink'
};
Object.assign(element.style, newStyle);
注意属性名是驼峰形的，没有破折号。
这甚至会告诉你它们何时被弃用。
实现这一目标的不同方法:
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有帮助
在Javascript中设置多个css样式属性
document.getElementById("yourElement").style.cssText = cssString;
or
document.getElementById("yourElement").setAttribute("style",cssString);
例子:
document
.getElementById("demo")
.style
.cssText = "margin-left:100px;background-color:red";
document
.getElementById("demo")
.setAttribute("style","margin-left:100px; background-color:red");
