Как подать заявление! Важно использовать .css ()?

Question

У меня проблемы с применением стиля !important. Я пробовал:

$("#elem").css("width", "100px !important");

Это ничего не значит ; стиль ширины не применяется. Есть ли способ применения такого стиля в jQuery-ih без необходимости перезаписывать cssText (что означало бы, что мне сначала нужно его проанализировать и т. Д.)?

Редактировать : я должен добавить, что у меня есть таблица стилей со стилем !important, которую я пытаюсь переопределить с помощью встроенного стиля !important, поэтому использование .width() и т.п. не работает так как он переопределяется моим внешним !important стилем.

Кроме того, значение, которое переопределит предыдущее значение , вычисляется , поэтому я не могу просто создать другой внешний стиль.

Answer 1

Это решение оставит весь вычисленный javascript и добавит важный тег в элемент: Вы можете сделать (например, если вам нужно установить ширину с важным тегом)

$('exampleDiv').css('width', '');
//This will remove the width of the item
var styles = $('exampleDiv').attr('style');
//This will contain all styles in your item
//ex: height:auto; display:block;
styles += 'width: 200px !important;'
//This will add the width to the previous styles
//ex: height:auto; display:block; width: 200px !important;
$('exampleDiv').attr('style', styles);
//This will add all previous styles to your item

Answer 2

Три рабочих примера

У меня была похожая ситуация, но я использовал .find () после долгой борьбы с .closest () со многими вариантами.

Пример кода

// Allows contain functions to work, ignores case sensitivity

jQuery.expr[':'].contains = function(obj, index, meta, stack) {
    result = false;
    theList = meta[3].split("','");
    var contents = (obj.textContent || obj.innerText || jQuery(obj).text() || '')
    for (x=0; x<theList.length; x++) {
        if (contents.toLowerCase().indexOf(theList[x].toLowerCase()) >= 0) {
            return true;
        }
    }
    return false;
};

$(document).ready(function() {
    var refreshId = setInterval( function() {
        $("#out:contains('foo', 'test456')").find(".inner").css('width', '50px', 'important');
    }, 1000); // Rescans every 1000 ms
});

Альтернативный

$('.inner').each(function () {
    this.style.setProperty('height', '50px', 'important');
});

$('#out').find('.inner').css({ 'height': '50px'});

Рабочая: http://jsfiddle.net/fx4mbp6c/

Answer 3

Я предполагаю, что вы попробовали это без добавления !important?

Встроенный CSS (именно так JavaScript добавляет стилизацию) переопределяет CSS таблицы стилей. Я уверен, что это так, даже если правило CSS для таблицы стилей имеет !important.

Еще один вопрос (может быть, глупый вопрос, но его нужно задать.): Элемент, над которым вы пытаетесь работать display:block; или display:inline-block;?

Не зная вашего опыта в CSS ... встроенные элементы не всегда ведут себя так, как вы ожидаете.

Answer 4

Мы можем использовать setProperty или cssText, чтобы добавить !important к элементу DOM, используя JavaScript.

Пример 1:

elem.style.setProperty ("color", "green", "important");

Пример 2:

elem.style.cssText='color: red !important;'

Answer 5

Может подходить или не подходить для вашей ситуации, но вы можете использовать селекторы CSS для большинства ситуаций такого типа.

Если, например, вы хотите, чтобы 3-й и 6-й экземпляры .cssText имели различную ширину, вы можете написать:

.cssText:nth-of-type(3), .cssText:nth-of-type(6) {width:100px !important;}

Или:

.container:nth-of-type(3).cssText, .container:nth-of-type(6).cssText {width:100px !important;}

Answer 6

Я также обнаружил, что некоторые элементы или надстройки (например, Bootstrap) имеют некоторые особые классы, в которых они не очень хорошо работают с !important или другими обходными путями, такими как .addClass/.removeClass, и, таким образом, вам приходится переключать их вкл выкл.

Например, если вы используете что-то вроде <table class="table-hover">, единственный способ успешно изменить элементы, такие как цвета строк, - это включить / выключить класс table-hover, например

$(your_element).closest("table").toggleClass("table-hover");

Надеюсь, этот обходной путь будет кому-то полезен! :)

Answer 7

Самый безопасный способ обойти это - добавить класс, а затем выполнить магию в CSS :-), addClass() и removeClass() должны выполнить работу.

Answer 8

У меня возникла такая же проблема при попытке изменить цвет текста пункта меню при появлении «события».Когда я столкнулся с такой же проблемой, я нашел лучший способ:

Первый шаг: создать в своем CSS новый класс для этой цели, например:

.colorw{ color: white !important;}

Последний шаг:Примените этот класс, используя метод addClass следующим образом:

$('.menu-item>a').addClass('colorw');

Проблема решена.

Answer 9

https://jsfiddle.net/xk6Ut/256/

Альтернативным подходом является динамическое создание и обновление класса CSS в JavaScript. Чтобы сделать это, мы можем использовать элемент style и нам нужно использовать идентификатор для элемента style, чтобы мы могли обновить класс CSS

function writeStyles(styleName, cssText) {
    var styleElement = document.getElementById(styleName);
    if (styleElement) document.getElementsByTagName('head')[0].removeChild(
        styleElement);
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = styleName;
    styleElement.innerHTML = cssText;
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}

...

  var cssText = '.testDIV{ height:' + height + 'px !important; }';
  writeStyles('styles_js', cssText)

Answer 10

Еще один простой способ решить эту проблему, добавив атрибут style:

$('.selector').attr('style', 'width:500px !important');