Question

我尝试过对此代码进行各种再现，尝试更改某个元素以进行编码练习但是没有它们似乎能够在按钮单击时更改元素的多个样式属性。会喜欢一些帮助。谢谢！

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

Answer 1

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

Style cssText Property

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

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

Answer 2

要达到预期的结果，请使用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 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属性的元素中插入内联样式标记。

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

3 个答案: