Question

我有一个服务器端JS文件的引用，它在我的页面上动态创建div。我试图覆盖为创建的div而内联的css，但我无法这样做。

我已经尝试过了！重要的是，JS创造的风格仍然胜过我所做的一切。

当我在chrome的开发者控制台中查看样式时，它将element.style显示为“赢得”我的风格的风格我没有权限在服务器上编辑JS文件。

我把它放在我的页面中，它动态创建div并设置它们的样式。

<head>

<style>
#id
 {
    background-color: blue; !important; 
    display:block; !important;  
}
.class
 {
    background-color: blue; !important; 
}

</style>

</head>


<script src="http://xxx/xxx/xxxxx/xxxx.ashx?blank=xxxx" type="text/javascript" charset="utf-8"></script>

Answer 1

CSS！important标签在这里听起来像你的答案，但有时你需要确保你的CSS声明对于元素足够具体，即：

<div>
<a style="color:#F00;">A Link</a>
</div>

如果我应用下面的CSS，内联样式或＃F00仍将获胜：

div {color:#fff !important;}

但是，如果我特定我的CSS声明，即：

div a {color:#000 !important;} <--Notice the 'a' tag

然后我的链接将是＃000。如果使用JavaScript加载链接，这无关紧要。

请参阅我的JSFiddle示例：http://jsfiddle.net/zqpy0r6c/

可以在以下网站找到更多技术信息 When does CSS's !important declaration not work?

Answer 2

元素的style属性中给出的CSS总是胜过样式表。覆盖此CSS的最佳选择是使用一些JS编辑样式属性：

<script>
    function clearInlineStyling(element){
        element.style= null;
    }

</script>

接下来，您必须观看脚本的html，以添加新元素，找到它们并删除它们的样式。我会为此建议JQuery。

Answer 3

您可以创建自己的javascript来重新设置服务器javascript创建的div。

从服务器端JS创建的element.style重写CSS

3 个答案: