16

使用调用 .jsp 的插件，该插件使用其自己的外部托管样式表（它是一个 yelp 嵌入 - 试图操纵它的外观）。我要更改的一个元素上有一个 !important 标记，我似乎无法更改它...

我试过

<script type="text/javascript">
   $('.elementToChange').css({'background-color':'black'});​
</script>

无济于事。想法？

4

5 回答 5

44

看起来在 jQuery 的更新版本（至少 1.7.2 和更高版本）中，您可以简单地设置 css：

$('#elementToChange').css('background-color', 'blue');

见http://jsfiddle.net/HmXXc/185/

在旧版本的 jQuery 和 Zepto 中，您必须先清除 css：

// Clear the !important css
$('#elementToChange').css('background-color', '');

然后使用以下方法重置它：

$('#elementToChange').css('background-color', 'blue');

或单线：

$('#elementToChange')
    .css('background-color', '')
    .css('background-color', 'blue');

请参阅http://jsfiddle.net/HmXXc/186/。

原始答案：

注意：这可能是个坏主意，因为它会删除任何其他内联样式

我会直接编辑样式属性

$('.elementToChange').attr('style', 'background-color: blue !important');

http://jsfiddle.net/RichardTowers/3wemT/1/

于 2012-05-20T14:28:26.010 回答
4

这是您的解决方案：

http://jsfiddle.net/irrpm/bdhpp/2/

这个想法是添加类：

$('.elementToChange').addClass('blackBg');
于 2012-05-20T14:23:59.667 回答
1

您可以使用以下步骤操作！important css，您可以使用内联 css 或内部 css，或者您可以在预加载 css 的顺序之后加载自己的外部 css，它将帮助您用自定义 css 覆盖该 css。

 <html>
    <head>
    <!--
    //First Solution
    //PreloaderCSS
    //YourCustomCSS

    //Second Solution
    Internal CSS -->
    </head>
    <body>
<!--
Third solution
//Inline CSS
->
    </body>
    </html>
于 2017-04-18T17:07:41.500 回答
0

您可以使用以下功能：

function replaceBGColorImportant(element,newColor){
    var styles = element.getAttribute('style');
    styles = styles?styles.split(';'):[];
    var newStyles = [];
    styles.map(function(x){
        if (x.split(':')[0] != "background-color")
            newStyles.push(x);
    });
    newStyles.push('background-color:#'+newColor+' !important');
    element.setAttribute('style',newStyles.join(';'));
}

执行如下：

replaceBGColorImportant(document.body,'#009922');
于 2014-08-12T13:14:37.367 回答
0

通过正则表达式： https ://jsfiddle.net/7jj7gq3y/2/

HTML：

<div class="elementToChange" style=" background-color: yellow !important; width: 100px; height: 100px;"></div>

JavaScript：

var setImportantStyle = function(element, attributeName, value) {
    var style = element.attr('style');
    if (style === undefined) return;
    var re = new RegExp(attributeName + ": .* !important;", "g");
    style = style.replace(re, "");
    element.css('cssText', attributeName + ': ' + value + ' !important;' + style);
}
setImportantStyle($('.elementToChange'), 'background-color', 'red');
于 2016-05-11T00:31:40.060 回答