Question

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

我试过

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

无济于事。想法？

Answer 1

看起来在更新的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/

Answer 2

以下是您的解决方案：

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

想法是添加类：

$('.elementToChange').addClass('blackBg');

Answer 3

你可以通过使用以下步骤操作！important css，你可以使用inline-css或Internal css，也可以按照预加载的css的顺序加载你自己的外部css，它会帮助你用你的css覆盖那个css定制的。

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

    //Second Solution
    Internal CSS -->
    </head>
    <body>
<!--
Third solution
//Inline CSS
->
    </body>
    </html>

Answer 4

您可以使用以下功能：

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');

Answer 5

通过正则表达式： 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');

使用具有！important标记的jquery更改div的背景颜色

5 个答案: