изменение цвета фона div с jquery, который имеет!важный тег

используя плагин, который вызывает a .jsp, который использует свою собственную таблицу стилей, размещенную снаружи (это Yelp embed - попытка манипулировать ее внешним видом). Один элемент я пытаюсь изменить есть !важная метка, и я не могу ее изменить...

пробовал

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

безрезультатно. Идеи?

10
javascript jquery

5 ответов

похоже, что в более современных версиях 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/

30

вот вам решение:

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

идея в том, чтобы добавить класс:

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

вы можете манипулировать !важный css используя следующие шаги, либо вы можете использовать встроенный css или внутренний css, либо вы можете загрузить свой собственный внешний css после порядка этого предварительно загруженного css, это поможет вам переопределить этот css с вашим пользовательским.

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

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

Вы можете использовать следующую функцию:

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