如何使用 Javascript 为一个元素添加多个样式属性？答案

【问题标题】：How to use Javascript to add multiple style properties to one element?如何使用 Javascript 为一个元素添加多个样式属性？
【发布时间】：2016-07-18 00:41:24
【问题描述】：

我已经尝试了此代码的各种再现，以尝试更改某个元素以进行编码练习，但似乎没有一个能够在单击按钮时更改元素的多个样式属性。希望得到一些帮助。谢谢！

document.getElementById("Combo Style").onclick = function() { document.getElementById ("More Text").style.fontSize.color = "50px , #BB65C5"; }

【问题讨论】：

How to set multiple css style properties in Javascript的可能重复

标签： javascript html css text-styling

【解决方案1】：

要达到您的预期结果，请使用 setAttribute
HTML：

<button id="Combo Style">Change</button>
<div id="More Text">abcd</div>

JS：

document.getElementById("Combo Style").onclick = function() {
  document.getElementById("More Text").setAttribute("style", "font-size:50px;color:red;");

}

http://codepen.io/nagasai/pen/AXVWwO

【讨论】：

【解决方案2】：

您可以使用 cssText 属性，但它会完全改变元素的样式

Style cssText Property

document.getElementById("myP").style.cssText = "background-color:pink;font-size:55px;border:2px dashed green;color:white;"

这将覆盖该元素的现有 css 样式，因此请确保包含所有需要的属性。

【讨论】：

【解决方案3】：

您需要使用 id 或任何选择器来抓取元素，并使用 style 属性或 css text 属性来应用 css。检查下面的代码 -

    var element=document.getElementById("More Text");
    element.style.fontSize="20px";
    element.style.color="red";
    element.style.background="blue";

你也可以使用 cssText 属性，比如 -

document.getElementById("More Text").style.cssText='fontSize="20px";color="red";'

这将在具有 csstext 属性的元素中插入一个内联样式标签。

【讨论】：

请编辑更多信息。不建议使用纯代码和“试试这个”的答案，因为它们不包含可搜索的内容，也没有解释为什么有人应该“试试这个”。