更改css属性

是否可以在一行代码中更改css属性？这是我要做的事情，如果我想改变两个属性。更改css属性

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

请勿使用输入。大声笑 – Gowri

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

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

2011-11-30 08:53:48 Niels

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

2011-11-30 08:54:24 Johann

这不会覆盖所有其他内联CSS？ – Niels

是的，但这将是唯一的方法来做到1行，而不使用任何框架 – Johann

如果你有CSS值作为字符串，没有其他的CSS已经设置元素（或你不关心覆盖），使我们的cssText属性：

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

2011-11-30 08:57:05 pramodtech

你可以尝试改变使用jqueryf例如元素的类：

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

或使用attr方法：

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

2011-11-30 08:58:26 LostMohican

此举样式一些类，并使用类名而不是单独应用样式。这是建议的方法。

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

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

编辑

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

2011-11-30 08:58:36 singles

他可能想要改变元素的'一些样式属性'。在这种情况下，完整的班级变更有点过分。 –

您可以随时添加第二个班级名称，而不是更改现有的班级名称。使用类而不是样式是推荐的做法，因为它具有更好的性能，并且实现起来更容易，尤其是当您添加其他属性时。而且，在班级解决方案中，您在更改之前没有记住参数，只需从元素中删除添加的班级名称即可。 – singles

没有任何框架，确实没有一个可以接受的解决方案。如果你是想防止重复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和其他人一样。

2011-11-30 09:03:17

回答