change background color of div with jquery that ha

2020-06-09 11:13发布

站内问答 / JavaScript
1233 5 5

Using a plugin that calls a .jsp that uses its own stylesheet hosted externally (it's a yelp embed - trying to manipulate the look of it). The one element I'm trying to change has an !important tag on it, and I can't seem to change it...

I tried

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

to no avail. Ideas?

5条回答
▲ chillily
2楼-- · 2020-06-09 11:25

Via regular expression: 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');
查看更多
0人赞 添加讨论(0) 举报
We Are One
3楼-- · 2020-06-09 11:26

It looks like in more up-to-date versions of jQuery (at least 1.7.2 and higher) you can simply set the css:

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

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

In older versions of jQuery and Zepto you had to clear the css first:

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

And then reset it using:

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

Or in a one-liner:

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

See http://jsfiddle.net/HmXXc/186/.

Original answer:

Note: this may be a bad idea, as it will remove any other inline styles

I would edit the style attribute directly

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

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

查看更多
0人赞 添加讨论(0) 举报
成全新的幸福
4楼-- · 2020-06-09 11:28

You can use the following function:

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

Execute as follows:

replaceBGColorImportant(document.body,'#009922');
查看更多
0人赞 添加讨论(0) 举报
傲
5楼-- · 2020-06-09 11:29

You can manipulate !important css by using following steps, either you can use inline-css or Internal css or you can load your own external css after the order of that preloaded css, it will help you to override that css with your custom one.

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

    //Second Solution
    Internal CSS -->
    </head>
    <body>
<!--
Third solution
//Inline CSS
->
    </body>
    </html>
查看更多
0人赞 添加讨论(0) 举报
forever°为你锁心
6楼-- · 2020-06-09 11:33

Here is your solution:

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

The idea is to add the class:

$('.elementToChange').addClass('blackBg');
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)