如何申请!重要使用.css()?

我很难应用一种!important的风格。 我试过了:

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

什么都不做 ; 任何宽度的风格都不适用。 是否有jQuery的方式来应用这种风格,而不必覆盖cssText (这意味着我需要先parsing它,等等)?

编辑 :我应该添加,我有一个!important样式的样式表,我试图重写!important样式内联,所以使用。 .width()等不工作,因为它被我的外部重写样式重写。

而且,将会覆盖之前值的值将被计算 ,所以我不能简单地创build另一个外部样式。

我想我已经find了一个真正的解决scheme。 我已经把它变成了一个新的function:

jQuery.style(name, value, priority);

你可以使用它来像.css('name')一样使用.style('name')获得值,使用.style('name') .css('name')获得CSSStyleDeclaration,并且设置值 – 可以指定优先级为'important' 。 看到这个

演示

 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

 (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宽度的!important ,以避免与其他主题的CSS冲突,但我对jQuery的宽度所做的任何更改将不会受到影响,因为他们将被添加到样式属性。

兼容性

为了使用setProperty函数设置优先级, 本文说,支持IE 9+和所有其他浏览器。 我已经尝试过与IE 8,它已经失败了,这就是为什么我在我的function(见上文)build立支持。 它将使用setProperty在所有其他浏览器上工作,但它将需要我的自定义代码在<IE 9中工作。

这个问题是由jQuery不理解!important属性造成的,因此不能应用规则。

您可能可以解决该问题,并通过引用addClass()来应用该规则:

 .importantRule { width: 100px !important; } $('#elem').addClass('importantRule'); 

或者通过使用attr()

 $('#elem').attr('style', 'width: 100px !important'); 

不过,后一种方法将会取消任何以前设置的内嵌式样式规则。 所以小心使用。

当然,有一个很好的论点是@Nick Craver的方法更简单明智。

上面, attr()方法略微修改以保留原始stylestring/属性:

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

David Thomas的回答描述了一种使用$('#elem').attr('style', …) ,但是警告说使用它会删除style属性中以前设置的样式。 这是一个使用attr()没有这个问题的方法:

 var $elem = $('#elem'); $elem.attr('style', $elem.attr('style') + '; ' + 'width: 100px !important'); 

作为一个function:

 function addStyleAttribute($element, styleAttribute) { $element.attr('style', $element.attr('style') + '; ' + styleAttribute); } 
 addStyleAttribute($('#elem'), 'width: 100px !important'); 

这是一个JS斌演示 。

阅读其他答案和试验后,这对我来说是有效的:

 $(".selector")[0].style.setProperty( 'style', 'value', 'important' ); 

但是,这在IE 8和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"); 

有点晚了,但这是我遇到这个问题后所做的…

 var origStyleContent = jQuery('#logo-example').attr('style'); jQuery('#logo-example').attr('style',origStyleContent+';width:150px !important'); 

没有必要去@AramKocharyan的答案的复杂性,也不需要dynamic地插入任何样式标签。

只是覆盖风格, 你不必parsing任何东西,你为什么?

 //accepts the hyphenated versions (ie 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中的!important规则。
不能使用element.style[property] = ''因为它只接受在FireFox中的camelCase。

你可以用jQuery来缩短这个时间,但是这个香草函数可以运行在现代浏览器,IE8等

如果它不那么相关,并且因为你正在处理一个是#elem元素,你可以改变它的ID为别的东西,并按照你的意愿来devise它。

 $('#elem').attr('id','cheaterId'); 

并在您的CSS:

 #cheaterId { width: 100px;} 

希望这有助于思南。

此解决scheme不会覆盖任何以前的样式,它只是应用您需要的一个:

 var heightStyle = "height: 500px !important"; if ($("foo").attr('style')) { $("foo").attr('style', heightStyle + $("foo").attr('style').replace(/^height: [-,!,0-9,az, AZ, ]*;/,'')); else { $("foo").attr('style', heightStyle); } 

而不是使用css()函数尝试addClass()函数:

  <script> $(document).ready(function() { $("#example").addClass("exampleClass"); }); </script> <style> .exampleClass{ width:100% !important; height:100% !important; } </style> 

从我这个问题的最简单和最好的解决scheme是简单地使用addClass()而不是.css()或.attr()。

例如:

$('#elem').addClass('importantClass');

并在您的CSS文件中:

 .importantClass { width: 100px !important; } 

我们需要先删除以前的样式。 我删除使用常规。 我给你一个改变颜色的例子,…

 var SetCssColorImportant = function (jDom, color) { var style = jDom.attr('style'); style = style.replace(/color: .* !important;/g, ''); jDom.css('cssText', 'color: ' + color + ' !important;' + style); } 

头部追加样式的另一种方法

 $('head').append('<style> #elm{width:150px !important} </style>'); 

这附加所有的CSS文件样式,所以它会比其他CSS文件更高的优先级,将被应用

可能看起来像这样:

高速caching

  var node = $('。selector')[0];
要么
 var node = document.querySelector('。selector');

设置CSS

  node.style.setProperty('width','100px','important'); 

删除CSS

  node.style.removeProperty( '宽度');
要么
 node.style.width =''; 

仅供参考,它不工作,因为jQuery不支持它。 2012年有一张票( #11173 $(elem).css(“property”,“value!important”)失败 ),最终以WONTFIX结尾。

为什么不只是这样做:

 $("#elem").get(0).style.width= "100px!important"; 

我会假设你尝试了而不添加重要?
内联的CSS(这是如何JS添加样式)覆盖样式表CSS。 我敢肯定,即使样式表css规则有!重要的情况。

另一个问题(也许是一个愚蠢的问题,但必须问):是你正在努力工作的元素,它是显示:块; 或者显示:inline-block; ?

不知道你在CSS的专业知识..内联元素并不总是像你所期望的那样。

它可能会或可能不适合您的情况,但是您可以使用CSSselect器来处理这些types的情况。

例如,如果你想让.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;} 

我还发现某些元素或附加组件(如Bootstrap)有一些特殊的类案例,它们不能很好地与.addClass/.removeClass!important或其他的变通方法.addClass/.removeClass ,因此您必须将它们切换到/closures。

例如,如果使用类似于<table class="table-hover">的方法,那么成功修改像行的颜色之类的元素的唯一方法就是打开/closurestable-hover类,就像这样

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

希望这个解决方法对别人有帮助! 🙂

我们可以使用setProperty或cssText来使用java脚本添加!对dom元素的重要性。

例1:

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

EG2:

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

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

另一种方法是dynamic创build和更新JavaScript中的CSS类。 要做到这一点,我们可以使用样式元素,并需要使用样式元素的ID,以便我们可以更新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中创build一个新的类,例如:

 .colorw{ color: white !important;} 

最后一步:使用addClass方法应用这个类,如下所示:

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

问题解决了。 希望它有帮助!

3个工作例子

我有类似的情况,但我用.find()与.closest()长时间挣扎后,有很多变化。

示例代码

 // allows contains fuction 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 1000ms }); 

替代

 $( '.inner' ).each(function () { this.style.setProperty( 'height', '50px', 'important' ); }); $('#out').find('.inner').css({ 'height': '50px'}); 

如果您发现任何使用,请投票,谢谢。

工作: http : //jsfiddle.net/fx4mbp6c/

我认为它工作正常,可以覆盖任何其他的CSS(this:DOM元素)之前:

 this.setAttribute('style', 'padding:2px !important'); 

另一个简单的方法来解决这个问题添加样式属性:

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