我有以下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
当前回答
最好的办法是创建一个函数来自己设置样式:
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)
其他回答
使用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)美元
最好的办法是创建一个函数来自己设置样式:
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)
在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");
因为字符串支持添加，你可以很容易地添加你的新样式，而不需要覆盖当前的样式:
document.getElementById("myElement").style.cssText += `
font-size: 12px;
left: 200px;
top: 100px;
`;
我们可以在Node原型中添加styles函数:
Node.prototype.styles=function(obj){ for (var k in obj) this.style[k] = obj[k];}
然后，在任意节点上调用styles方法:
elem.styles({display:'block', zIndex:10, transitionDuration:'1s', left:0});
它将保留任何其他现有的样式，并覆盖对象参数中的值。
