我很难应用这样的风格!重要的我尝试过:
$("#elem").css("width", "100px !important");
这没有任何作用;不应用任何宽度样式。有没有类似jQuery的方法来应用这样的样式而不必覆盖cssText(这意味着我需要先解析它,等等)?
编辑:我应该补充一下,我有一个带有!我试图用!重要的样式内联,因此使用.width()等不会起作用,因为它会被我的外部重写!重要的风格。
此外,将覆盖上一个值的值是计算出来的,因此我不能简单地创建另一个外部样式。
我很难应用这样的风格!重要的我尝试过:
$("#elem").css("width", "100px !important");
这没有任何作用;不应用任何宽度样式。有没有类似jQuery的方法来应用这样的样式而不必覆盖cssText(这意味着我需要先解析它,等等)?
编辑:我应该补充一下,我有一个带有!我试图用!重要的样式内联,因此使用.width()等不会起作用,因为它会被我的外部重写!重要的风格。
此外,将覆盖上一个值的值是计算出来的,因此我不能简单地创建另一个外部样式。
当前回答
大多数这些答案现在都过时了,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示例。
其他回答
无需考虑@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(),因为它不会删除!Chrome中的重要规则。无法使用element.style[property]='',因为它只接受Firefox中的camelCase。
您可能会用jQuery缩短这个过程,但这个普通函数将在现代浏览器、InternetExplorer8等上运行。
我想你没有添加就尝试了!重要的
内联CSS(这是JavaScript添加样式的方式)覆盖样式表CSS。我很确定,即使样式表CSS规则有这种情况!重要的
另一个问题(可能是一个愚蠢的问题,但必须要问。):您正在尝试的元素是否显示:block;或显示:内联块;?
不知道你在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 = '';
我们可以使用setProperty或cssText来添加!对于使用JavaScript的DOM元素来说很重要。
示例1:
elem.style.setProperty ("color", "green", "important");
示例2:
elem.style.cssText='color: red !important;'
可以直接使用.width()设置宽度,如下所示:
$("#elem").width(100);
更新征求意见:您也有这个选项,但它将替换元素上的所有css,因此不确定它是否更可行:
$('#elem').css('cssText', 'width: 100px !important');