我很难应用这样的风格!重要的我尝试过:
$("#elem").css("width", "100px !important");
这没有任何作用;不应用任何宽度样式。有没有类似jQuery的方法来应用这样的样式而不必覆盖cssText(这意味着我需要先解析它,等等)?
编辑:我应该补充一下,我有一个带有!我试图用!重要的样式内联,因此使用.width()等不会起作用,因为它会被我的外部重写!重要的风格。
此外,将覆盖上一个值的值是计算出来的,因此我不能简单地创建另一个外部样式。
我很难应用这样的风格!重要的我尝试过:
$("#elem").css("width", "100px !important");
这没有任何作用;不应用任何宽度样式。有没有类似jQuery的方法来应用这样的样式而不必覆盖cssText(这意味着我需要先解析它,等等)?
编辑:我应该补充一下,我有一个带有!我试图用!重要的样式内联,因此使用.width()等不会起作用,因为它会被我的外部重写!重要的风格。
此外,将覆盖上一个值的值是计算出来的,因此我不能简单地创建另一个外部样式。
当前回答
另一种解决此问题的简单方法是添加样式属性:
$('.selector').attr('style', 'width:500px !important');
其他回答
可以直接使用.width()设置宽度,如下所示:
$("#elem").width(100);
更新征求意见:您也有这个选项,但它将替换元素上的所有css,因此不确定它是否更可行:
$('#elem').css('cssText', 'width: 100px !important');
此解决方案将保留所有计算的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
大多数这些答案现在都过时了,IE7支持不是问题。
支持IE11+和所有现代浏览器的最佳方法是:
const $elem = $("#elem");
$elem[0].style.setProperty('width', '100px', 'important');
或者,如果需要,可以创建一个小型jQuery插件来实现这一点。该插件在其支持的参数中与jQuery自己的css()方法非常匹配:
/**
* Sets a CSS style on the selected element(s) with !important priority.
* This supports camelCased CSS style property names and calling with an object
* like the jQuery `css()` method.
* Unlike jQuery's css() this does NOT work as a getter.
*
* @param {string|Object<string, string>} name
* @param {string|undefined} value
*/
jQuery.fn.cssImportant = function(name, value) {
const $this = this;
const applyStyles = (n, v) => {
// Convert style name from camelCase to dashed-case.
const dashedName = n.replace(/(.)([A-Z])(.)/g, (str, m1, upper, m2) => {
return m1 + "-" + upper.toLowerCase() + m2;
});
// Loop over each element in the selector and set the styles.
$this.each(function(){
this.style.setProperty(dashedName, v, 'important');
});
};
// If called with the first parameter that is an object,
// Loop over the entries in the object and apply those styles.
if(jQuery.isPlainObject(name)){
for(const [n, v] of Object.entries(name)){
applyStyles(n, v);
}
} else {
// Otherwise called with style name and value.
applyStyles(name, value);
}
// This is required for making jQuery plugin calls chainable.
return $this;
};
// Call the new plugin:
$('#elem').cssImportant('height', '100px');
// Call with an object and camelCased style names:
$('#another').cssImportant({backgroundColor: 'salmon', display: 'block'});
// Call on multiple items:
$('.item, #foo, #bar').cssImportant('color', 'red');
这里是jsfiddle示例。
我们可以使用setProperty或cssText来添加!对于使用JavaScript的DOM元素来说很重要。
示例1:
elem.style.setProperty ("color", "green", "important");
示例2:
elem.style.cssText='color: red !important;'
您可以通过两种方式实现这一点:
$("#elem").prop("style", "width: 100px !important"); // this is not supported in chrome
$("#elem").attr("style", "width: 100px !important");