更改css属性

Question

是否可以在一行代码中更改css属性？如果我想改变两个属性，我就会这样做。

document.getElementById('el').style.display = "inline";
document.getElementById('el').style.backgroundColor = "#000000";

Answer 1

将这些样式移动到某个类，并使用类名而不是单独应用样式。这是推荐的方法。

/*CSS*/
.yourClass {
    display: inline;
    background-color: #000
}

//JS
document.getElementById('el').className = 'yourClass';

修改

伙计们，请 - 停止编写jQuery示例。这是如此简单的任务，即不需要至少30KB的库。

Answer 2

document.getElementById('el').cssText = "display:inline; background-color:#000000";

Answer 3

您可以尝试使用jqueryf更改元素的类，例如：

$("p").addClass("myClass yourClass");

或使用attr方法：

$("p").attr("class" yourClass");

Answer 4

如果你使用jQuery，你可以做到这一点：

$("#el").css({ display : "inline", "backgroundColor" : "#000000" });

Answer 5

如果您将CSS值作为字符串并且没有为该元素设置其他CSS（或者您不关心覆盖），请使用 cssText 属性：

document.getElementById("myElement").style.cssText = cssString;

检查SO链接以获取更多详细信息https://stackoverflow.com/a/3968772/287100

Answer 6

没有任何框架，确实没有可接受的解决方案。如果您想阻止重复的getElementById()来电，可以执行以下操作：

var el = document.getElementById('el').style;
el.display = "inline";
el.backgroundColor = "#000000";

或可以说更具可读性和语义更正确：

var el = document.getElementById('el');
el.style.display = "inline";
el.style.backgroundColor = "#000000";

但这仍然无法解决一线问题。我强烈推荐jQuery，就像其他人一样。