如何申请！重要使用.css（）？

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

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

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

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

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

Answer 1

我想我已经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中工作。

Answer 2

这个问题是由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;' }); 

Answer 3

你可以直接使用.width()来设置宽度，如下所示：

 $("#elem").width(100); 

更新的意见：你也有这个选项，但它会取代元素上的所有CSS，所以不确定它是否更可行：

 $('#elem').css('cssText', 'width: 100px !important'); 

Answer 4

 var elem = $("#elem"); elem[0].style.removeAttribute('width'); elem[0].style.setProperty('width', '100px', 'important'); 

Answer 5

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斌演示 。

Answer 6

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

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

但是，这在IE 8和IE 8下不起作用。

Answer 7

你可以这样做：

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

使用“cssText”作为属性名称，以及任何你想添加到CSS的价值。

Answer 8

您可以通过两种方式来实现这一点：

 $("#elem").prop("style", "width: 100px !important"); // this is not supported in chrome $("#elem").attr("style", "width: 100px !important"); 

Answer 9

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

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

Answer 10

没有必要去@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等

Answer 11

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

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

并在您的CSS：

 #cheaterId { width: 100px;} 

希望这有助于思南。

Answer 12

此解决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); } 

Answer 13

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

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

Answer 14

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

例如：

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

并在您的CSS文件中：

 .importantClass { width: 100px !important; } 

Answer 15

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

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

Answer 16

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

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

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

Answer 17

可能看起来像这样：

高速caching

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

设置CSS

  node.style.setProperty（'width'，'100px'，'important'）; 

删除CSS

  node.style.removeProperty（ '宽度'）;
要么
 node.style.width =''; 

Answer 18

仅供参考，它不工作，因为jQuery不支持它。 2012年有一张票（ ＃11173 $（elem）.css（“property”，“value！important”）失败 ），最终以WONTFIX结尾。

Answer 19

为什么不只是这样做：

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

Answer 20

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

另一个问题（也许是一个愚蠢的问题，但必须问）：是你正在努力工作的元素，它是显示：块; 或者显示：inline-block; ？

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

Answer 21

它可能会或可能不适合您的情况，但是您可以使用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;} 

Answer 22

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

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

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

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

Answer 23

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

例1：

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

EG2：

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

Answer 24

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) 

Answer 25

尝试在“事件”时更改菜单项的文本颜色时遇到同样的问题。 当我遇到同样的问题时，最好的办法是：

第一步：在你的CSS中创build一个新的类，例如：

 .colorw{ color: white !important;} 

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

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

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

Answer 26

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/

Answer 27

我认为它工作正常，可以覆盖任何其他的CSS（this：DOM元素）之前：

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

Answer 28

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

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