如何应用！important使用.css（）？ [英] How to apply !important using .css()?
问题描述
我无法应用！important 的样式。我试过：
$（＃elem）。css（width 100px！important）;
没有没有应用任何宽度样式。是否有一个jQuery-ish方式应用这样的样式，而不必覆盖 cssText （这意味着我需要先解析它，等等）？
编辑：我应该添加一个样式表，其中包含！important 尝试用！important 样式内联，因此使用 .width（）等不工作，因为它！重要样式覆盖。
此外，将覆盖上一个值的值
我认为我找到了一个真正的解决方案。我已经把它变成一个新的函数：
jQuery.style（name，value，priority）; / p>
您可以使用它来获取 .style（'name'）的值，就像 .css（'name'），使用 .style（）获取CSSStyleDeclaration，并设置值 - '重要'。请参阅此。
演示
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
< h2>函数
（function（$）{
if（$ .fn.style）{
返回;
}
//使用\
转义正则表达式字符var escape = function（text）{
return text.replace（/ [ - \\] {}（）* +？。，\\ ^ $ |＃\s] / g，\\ $&）;
};
$ b b //对于需要它们的用户（< IE 9），添加对CSS函数的支持
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优先级手动
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（escapeName）+'\\s *：\\s * [^ \\ s] * \ \s *！important（\\s *;）？'，
'gmi'）;
return rule.test（this.cssText）？ 'important'：'';
}
}
//样式函数
$ .fn.style = function（styleName，value，priority）{
// DOM节点
var node = this.get（0）;
//确保我们有一个DOM节点
if（typeof node =='undefined'）{
return this;
}
// CSSStyleDeclaration
var style = this.get（0）.style;
// Getter / Setter
if（typeof styleName！='undefined'）{
if（typeof value！='undefined'）{
//设置样式属性
priority = typeof priority！='undefined'？优先 ： '';
style.setProperty（styleName，value，priority）;
return this;
} else {
//获取样式属性
return style.getPropertyValue（styleName）;
}
} else {
//获取CSSStyleDeclaration
返回样式;
}
};
}）（jQuery）;
请参阅这 如何读取和设置CSS值的示例。我的问题是，我已经设置了！important 为我的CSS中的宽度，以避免与其他主题CSS冲突，但我对jQuery的宽度的任何更改将不受影响因为它们将被添加到样式属性中。
兼容性
c $ c> setProperty 函数，本文表示支持IE 9+和所有其它浏览器。我试过IE 8，它失败了，这就是为什么我在我的功能（见上面）支持它。它将在所有其他浏览器使用setProperty，但它需要我的自定义代码工作在< IE 9。
I am having trouble applying a style that is !important. I’ve tried:
$("#elem").css("width", "100px !important");
This does nothing; no width style whatsoever is applied. Is there a jQuery-ish way of applying such a style without having to overwrite cssText (which would mean I’d need to parse it first, etc.)?
Edit: I should add that I have a stylesheet with an !important style that I am trying to override with an !important style inline, so using .width() and the like does not work since it gets overridden by my external !important style.
Also, the value that will override the previous value is computed, so I cannot simply create another external style.
I think I've found a real solution. I've made it into a new function:
jQuery.style(name, value, priority);
You can use it to get values with .style('name') just like .css('name'), get the CSSStyleDeclaration with .style(), and also set values - with the ability to specify the priority as 'important'. See this.
Demo
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'));
Here's the output:
null
red
blue
important
The 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);
See this for examples of how to read and set the CSS values. My issue was that I had already set !important for the width in my CSS to avoid conflicts with other theme CSS, but any changes I made to the width in jQuery would be unaffected since they would be added to the style attribute.
Compatibility
For setting with the priority using the setProperty function, This Article says there is support for IE 9+ and all other browsers. I have tried with IE 8 and it has failed, which is why I built support for it in my functions (see above). It will work on all other browsers using setProperty, but it will need my custom code to work in < IE 9.
这篇关于如何应用！important使用.css（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
