使用Javascript

Question

我有以下css类：

<style>
.popup
    {
        width : 1350px !important;
        height: 810px;
        margin-top:-100px;
        padding-top:10px;
    }
</style>

是否可以修改该类的任何属性？不是这个类已经应用的对象，而是css本身。

由于

添加完整代码：

<style>
.ngdialog.dialogcaseeditor .ngdialog-content
    {
        width : 1350px;
        height: 910px;
        margin-top:-100px;
        padding-top:10px;
    }
</style>

Answer 1

这是一个使用纯JavaScript（getElementByClassName），没有jQuery的示例，为所有带有.popup类的项目添加背景颜色：

var popups = document.getElementsByClassName('popup'),
    i = popups.length;

do {
    i--;
    popups[i].style.backgroundColor = "green";
} while (i >= 0)

Answer 2

通过获取正确的工作表（document.styleSheets）并修改规则（sheet.cssRules），可以使用javascript操纵样式表规则本身。

找到正确的工作表和修改规则本身就是一个问题。请参阅 my answer

上的Can I disable a CSS :hover effect via JavaScript?

编辑：根据为什么您要修改样式属性，可能有更好的方法来处理整个事情。

Answer 3

您可以使用JavaScript添加新的css规则，例如.popup { padding-top: 5px; }，由于CSS cascading rules（最后一条规则获胜），它会完全覆盖原始CSS的填充。这与更改原始样式具有相同的效果，适用于所有匹配元素和继承样式。

请注意，两个声明必须具有相同的权重，来源和特异性＆＃34;

编辑：

更改宽度的示例：

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".popup { width : 1500px !important; }";
document.body.appendChild(css);

http://jsfiddle.net/pw2argvz/