我有以下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(“*”)。样式=样式 一个
其他回答
最好的办法是创建一个函数来自己设置样式:
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)
实现这一目标的不同方法:
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库允许您非常轻松地完成这些工作
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];
}
使用Object.assign:
Object.assign(yourelement.style,{fontsize:"12px",left:"200px",top:"100px"});
这也让你能够合并样式，而不是重写CSS样式。
你也可以创建一个快捷功能:
const setStylesOnElement = function(styles, element){
Object.assign(element.style, styles);
}
请考虑使用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”);
