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

Question

我已经尝试了此代码的各种演绎版来尝试更改某个元素以进行编码练习，但似乎没有一个能够在单击按钮时更改元素的多个样式属性。会喜欢一些帮助。谢谢！

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

Answer 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

Answer 2

您需要使用 id 或任何选择器来获取元素，并使用样式属性或 css 文本属性来应用 css。检查以下代码 -

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

你也可以使用css文本属性，比如-

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

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

Answer 3

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

Style cssText Property

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

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

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

How to use Javascript to add multiple style properties to one element?

html

javascript

css

text-styling