我怎样才能在JavaScript中设置多个CSS样式？
我有以下的JavaScriptvariables：
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值设置为string，并且没有为元素设置其他CSS（或者您不关心覆盖），请使用cssText属性 ：
document.getElementById("myElement").style.cssText = cssString;
这在某种意义上是好的，因为它避免每次更改属性时都重新绘制元素（您以某种方式立即“全部”更改它们）。
另一方面，你必须先build立string。
使用Object.assign ：
Object.assign(yourelement.style,{fontsize:"12px",left:"200px",top:"100px"});
这也使您能够合并样式，而不是重写CSS样式。
你也可以做一个快捷function：
const setStylesOnElement = function(styles, element){ Object.assign(element.style, styles); }
@Mircea：在一个语句中设置一个元素的多个样式非常容易。 它不影响现有的属性，避免了循环或插件的复杂性。
document.getElementById("demo").setAttribute( "style", "font-size: 100px; font-style: italic; color:#ff0000;");
小心：如果稍后使用此方法添加或更改样式属性，则使用“setAttribute”设置的以前属性将被删除。
做一个function来照顾它，并将其参数与你想要更改的样式一起传递。
function setStyle( objId, propertyObject ) { var elem = document.getElementById(objId); for (var property in propertyObject) elem.style[property] = propertyObject[property]; }
并像这样称呼它
setStyle('myElement', {'fontsize':'12px', 'left':'200px'});
对于propertyObject中的属性的值，你可以使用variables..
一个JavaScript库允许你很容易地做这些事情
jQuery的
$('#myElement').css({ font-size: '12px', left: '200px', top: '100px' });
对象和for-in-loop
或者，一个更优雅的方法是一个基本的对象和for循环
var el = document.getElementById('#myElement'), css = { font-size: '12px', left: '200px', top: '100px' }; for(i in css){ el.style[i] = css[i]; }
在Javascript中设置多个CSS样式属性
document.getElementById("yourElement").style.cssText = cssString;
要么
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");
你可以在你的CSS文件中有单独的类，然后将类名分配给你的元素
或者你可以通过样式的属性循环 –
var css = { "font-size": "12px", "left": "200px", "top": "100px" }; for(var prop in css) { document.getElementById("myId").style[prop] = css[prop]; }
不要以为这是可能的。
但是你可以从样式定义中创build一个对象，并通过它们循环。
var allMyStyle = { fontsize: '12px', left: '200px', top: '100px' }; for (i in allMyStyle) document.getElementById("myElement").style[i] = allMyStyle[i];
进一步发展，做一个function：
function setStyles(element, styles) { for (i in styles) element.style[i] = styles[i]; } setStyles(document.getElementById("myElement"), allMyStyle);
使用简单的Javascript，你不能一次设置所有的风格; 你需要为每个人使用单行。
但是，您不必重复document.getElementById(...).style. 代码一遍又一遍; 创build一个对象variables来引用它，你会让你的代码更加可读：
var obj=document.getElementById("myElement").style; obj.top=top; obj.left=left;
…等等。 比你的例子更容易阅读（坦率地说，就像jQuery替代品一样容易阅读）。
（如果Javascript的devise正确，你也可以使用with关键字，但最好不要这样做，因为这会导致一些讨厌的命名空间问题）
你最好的select可能是创build一个函数来自定义样式：
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 ）
见.. in
例：
var myStyle = {}; myStyle.fontsize = "12px"; myStyle.left= "200px"; myStyle.top= "100px"; var elem = document.getElementById("myElement"); var elemStyle = elem.style; for(var prop in myStyle) { elemStyle[prop] = myStyle[prop]; }
这是旧的线程，所以我想为任何人寻找一个现代的答案，我会build议使用Object.keys（）;
var myDiv = document.getElementById("myDiv"); var css = { "font-size": "14px", "color": "#447", "font-family": "Arial", "text-decoration": "underline" }; function applyInlineStyles(obj) { var result = ""; Object.keys(obj).forEach(function (prop) { result += prop + ": " + obj[prop] + "; "; }); return result; } myDiv.style = applyInlineStyles(css);
我只是在这里偶然发现，我不明白为什么有这么多的代码需要实现这一点。
将您的CSS代码添加为string。
let styles = 'color:red; font-size:15em; transform:rotate(20deg)'; document.querySelector('#styleMe').style = styles;
<div id=styleMe>a</div>
我创build了一个名为styler.js的JavaScript实用程序，在我的博客上很容易使用。 它使获取和设置CSS样式非常容易。
在这里find它： http : //www.tjcafferkey.me/getting-setting-styles-javascript-styler/
