Как подать заявку!важное использование.в CSS()?
у меня возникли проблемы с применением стиля, который !important
. Я пробовал:
$("#elem").css("width", "100px !important");
это ничего; никакой стиль ширины вообще не применяется. Есть ли jQuery-ish способ применения такого стиля без необходимости перезаписи cssText
(что означало бы, что мне нужно сначала разобрать его и т. д.)?
редактировать: добавлю, что у меня есть таблица стилей с !important
стиль, который я пытаюсь переопределить с !important
стиль inline, поэтому использование .width()
и подобное не работает, так как он переопределяется моим внешним !important
стиль.
кроме того, значение, которое аннулирует Предыдущее значение вычисляется, поэтому я не могу просто создать другой внешний стиль.
30 ответов
Я думаю, что нашел реальное решение. Я превратил его в новую функцию:
jQuery.style(name, value, priority);
вы можете использовать его для получения значений с .style('name')
как .css('name')
, получить CSSStyleDeclaration с .style()
, а также установить значения-с возможностью указать приоритет как "важный". См.этой.
демо
var div = $('someDiv');
console.log(div.style('color'));
div.style('color', 'red');
console.log(div.style('color'));
div.style('color', 'blue', 'important');
console.log(div.style('color'));
console.log(div.style().getPropertyPriority('color'));
вот вывод:
null
red
blue
important
Функции
(function($) {
if ($.fn.style) {
return;
}
// Escape regex chars with \
var escape = function(text) {
return text.replace(/[-[\]{}()*+?.,\^$|#\s]/g, "\$&");
};
// For those who need them (< IE 9), add support for CSS functions
var isStyleFuncSupported = !!CSSStyleDeclaration.prototype.getPropertyValue;
if (!isStyleFuncSupported) {
CSSStyleDeclaration.prototype.getPropertyValue = function(a) {
return this.getAttribute(a);
};
CSSStyleDeclaration.prototype.setProperty = function(styleName, value, priority) {
this.setAttribute(styleName, value);
var priority = typeof priority != 'undefined' ? priority : '';
if (priority != '') {
// Add priority manually
var rule = new RegExp(escape(styleName) + '\s*:\s*' + escape(value) +
'(\s*;)?', 'gmi');
this.cssText =
this.cssText.replace(rule, styleName + ': ' + value + ' !' + priority + ';');
}
};
CSSStyleDeclaration.prototype.removeProperty = function(a) {
return this.removeAttribute(a);
};
CSSStyleDeclaration.prototype.getPropertyPriority = function(styleName) {
var rule = new RegExp(escape(styleName) + '\s*:\s*[^\s]*\s*!important(\s*;)?',
'gmi');
return rule.test(this.cssText) ? 'important' : '';
}
}
// The style function
$.fn.style = function(styleName, value, priority) {
// DOM node
var node = this.get(0);
// Ensure we have a DOM node
if (typeof node == 'undefined') {
return this;
}
// CSSStyleDeclaration
var style = this.get(0).style;
// Getter/Setter
if (typeof styleName != 'undefined') {
if (typeof value != 'undefined') {
// Set style property
priority = typeof priority != 'undefined' ? priority : '';
style.setProperty(styleName, value, priority);
return this;
} else {
// Get style property
return style.getPropertyValue(styleName);
}
} else {
// Get CSSStyleDeclaration
return style;
}
};
})(jQuery);
посмотреть этой для примеров того, как читать и устанавливать значения CSS. Моя проблема заключалась в том, что я уже установил !important
для ширины в моем CSS, чтобы избежать конфликтов с другой темой CSS, но любые изменения, которые я внес в ширину в jQuery, не будут затронуты, так как они будут добавлены в атрибут style.
совместимость
для установки с приоритетом с помощью , В Этой Статье говорит, что есть поддержка IE 9+ и всех других браузеров. Я пробовал с IE 8, и это не удалось, поэтому я построил поддержку для него в своих функциях (см. выше). Он будет работать во всех других браузерах с помощью setProperty, но ему понадобится мой пользовательский код для работы в
проблема вызвана jQuery не понимая !important
атрибут, и как таковой не удается применить правило.
вы можете обойти эту проблему и применить правило, обратившись к нему через addClass()
:
.importantRule { width: 100px !important; }
$('#elem').addClass('importantRule');
и с помощью attr()
:
$('#elem').attr('style', 'width: 100px !important');
последний подход будет отменять любые ранее установленные правила стиля в строке. Поэтому используйте с осторожностью.
конечно, есть хороший аргумент, что метод @Nick Craver легче / мудрее.
выше, attr()
подход слегка изменен, чтобы сохранить оригинал style
строка/свойства:
$('#elem').attr('style', function(i,s) { return s + 'width: 100px !important;' });
вы можете установить ширину непосредственно с помощью .width()
такой:
$("#elem").width(100);
обновлено для комментариев: У вас есть этот вариант, но он заменит все css на элементе, поэтому не уверен, что он более жизнеспособен:
$('#elem').css('cssText', 'width: 100px !important');
var elem = $("#elem");
elem[0].style.removeAttribute('width');
elem[0].style.setProperty('width', '100px', 'important');
ответ Дэвида Томаса описывает способ использования $('#elem').attr('style', …)
, но предупреждает, что с его помощью будут удалены ранее установленные стили в . Вот способ использования attr()
без этой проблемы:
var $elem = $('#elem');
$elem.attr('style', $elem.attr('style') + '; ' + 'width: 100px !important');
функции:
function addStyleAttribute($element, styleAttribute) {
$element.attr('style', $element.attr('style') + '; ' + styleAttribute);
}
addStyleAttribute($('#elem'), 'width: 100px !important');
здесь JS Bin demo.
после прочтения других ответов и экспериментов, это то, что работает для меня:
$(".selector")[0].style.setProperty( 'style', 'value', 'important' );
Это не работает в IE 8 и ниже, хотя.
вы можете сделать это:
$("#elem").css("cssText", "width: 100px !important;");
использование "cssText" в качестве имени свойства и все, что вы хотите добавить в CSS в качестве его значения.
вы можете достичь этого двумя способами:
$("#elem").prop("style", "width: 100px !important"); // this is not supported in chrome
$("#elem").attr("style", "width: 100px !important");
нет необходимости переходить к сложности ответа @AramKocharyan, а также динамически вставлять теги стилей.
просто перезаписать стиль, но вам не нужно ничего разбирать, зачем вам это?
// Accepts the hyphenated versions (i.e. not 'cssFloat')
function addStyle(element, property, value, important) {
// Remove previously defined property
if (element.style.setProperty)
element.style.setProperty(property, '');
else
element.style.setAttribute(property, '');
// Insert the new style with all the old rules
element.setAttribute('style', element.style.cssText +
property + ':' + value + ((important) ? ' !important' : '') + ';');
}
Не могу использовать removeProperty()
, потому что он не будет удалять !important
правила в Chrome.
Не могу использовать element.style[property] = ''
, потому что он принимает только camelCase в Firefox.
вы могли бы сделать это короче с jQuery, но эта функция vanilla будет работать в современных браузерах, Internet Explorer 8 и т. д.
вот что я сделал после того, как столкнулся с этой проблемой...
var origStyleContent = jQuery('#logo-example').attr('style');
jQuery('#logo-example').attr('style', origStyleContent + ';width:150px !important');
это решение не переопределяет ни один из предыдущих стилей, оно просто применяет тот, который вам нужен:
var heightStyle = "height: 500px !important";
if ($("foo").attr('style')) {
$("foo").attr('style', heightStyle + $("foo").attr('style').replace(/^height: [-,!,0-9,a-z, A-Z, ]*;/,''));
else {
$("foo").attr('style', heightStyle);
}
Если это не так важно и поскольку вы имеете дело с одним элементом, который #elem
, вы можете изменить свой код, чтобы что-то еще и стиль его, как вы хотите...
$('#elem').attr('id', 'cheaterId');
и в вашем CSS:
#cheaterId { width: 100px;}
самым простым и лучшим решением этой проблемы от меня было просто использовать addClass() вместо .css () or .буква attr().
например:
$('#elem').addClass('importantClass');
и в вашем файле CSS:
.importantClass {
width: 100px !important;
}
FYI, это не работает, потому что jQuery не поддерживает его. Был подан билет на 2012 год (#11173 $(elem).УСБ("свойство", "значение !важно") терпит неудачу), который в конечном итоге был закрыт как WONTFIX.
сначала нужно удалить предыдущий стиль. Я удаляю его с помощью регулярного выражения. Вот пример изменения цвета:
var SetCssColorImportant = function (jDom, color) {
var style = jDom.attr('style');
style = style.replace(/color: .* !important;/g, '');
jDom.css('cssText', 'color: ' + color + ' !important;' + style); }
альтернативный способ добавления стиля в head:
$('head').append('<style> #elm{width:150px !important} </style>');
Это добавляет стиль после всех ваших файлов CSS, поэтому он будет иметь более высокий приоритет, чем другие файлы CSS, и будет применяться.
может быть, это выглядит вот так:
кэш
var node = $('.selector')[0]; OR var node = document.querySelector('.selector');
установить CSS
node.style.setProperty('width', '100px', 'important');
удалить CSS
node.style.removeProperty('width'); OR node.style.width = '';
Я бы предположил, что вы попробовали это без добавления !important
?
встроенный CSS (так JavaScript добавляет стиль) переопределяет CSS таблицы стилей. Я уверен, что это так, даже если правило CSS таблицы стилей имеет !important
.
другой вопрос (может быть, глупый вопрос, но должен быть задан.): Является ли элемент, над которым вы пытаетесь работать display:block;
или display:inline-block;
?
не зная вашего опыта в CSS... встроенные элементы не всегда ведут себя так, как вы ожидать.
это может быть или не быть подходящим для вашей ситуации, но вы можете использовать селекторы 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;}
Я думаю, что он работает нормально и может перезаписать любой другой CSS раньше (это: элемент DOM):
this.setAttribute('style', 'padding:2px !important');
Я также обнаружил, что некоторые элементы или дополнения (например, Bootstrap) имеют некоторые специальные случаи класса, где они не играют хорошо с !important
или другие работы, такие как .addClass/.removeClass
, и, таким образом, вы должны включить/выключить.
например, если вы используете что-то вроде <table class="table-hover">
единственный способ успешно изменить элементы, такие как цвета строк, - переключить table-hover
класс вкл / выкл, вот так
$(your_element).closest("table").toggleClass("table-hover");
Надеюсь, эта работа будет полезна кому-то! :)
мы можем использовать setProperty или cssText для добавления !important
к элементу DOM с помощью JavaScript.
Пример 1:
elem.style.setProperty ("color", "green", "important");
Пример 2:
elem.style.cssText='color: red !important;'
у меня была такая же проблема, пытаюсь изменить цвет текста пункта меню, когда "событие". Лучший способ, который я нашел, когда у меня была такая же проблема:
первый шаг: создайте в своем CSS новый класс с этой целью, например:
.colorw{ color: white !important;}
последний шаг: примените этот класс с помощью метода addClass следующим образом:
$('.menu-item>a').addClass('colorw');
проблема решена.
три рабочих примера
у меня была похожая ситуация, но я привык .find () после борьбы .ближайший() в течение длительного времени со многими вариациями.
Пример Кода
// 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'});
это решение оставит весь вычисленный 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
https://jsfiddle.net/xk6Ut/256/
альтернативным подходом является динамическое создание и обновление класса CSS в JavaScript. Для этого мы можем использовать элемент style и должны использовать ID для элемента 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)
самый безопасный обходной путь к этому-добавить класс, а затем сделать магию в CSS : -),addClass()
и removeClass()
должен делать работу.
еще один простой способ решить эту проблему, добавив атрибут style:
$('.selector').attr('style', 'width:500px !important');