我很难应用这样的风格!重要的我尝试过:

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

这没有任何作用;不应用任何宽度样式。有没有类似jQuery的方法来应用这样的样式而不必覆盖cssText(这意味着我需要先解析它,等等)?

编辑:我应该补充一下,我有一个带有!我试图用!重要的样式内联,因此使用.width()等不会起作用,因为它会被我的外部重写!重要的风格。

此外,将覆盖上一个值的值是计算出来的,因此我不能简单地创建另一个外部样式。


当前回答

不要使用css()函数,请尝试addClass()函数:

  <script>
  $(document).ready(function() {
    $("#example").addClass("exampleClass");
  });
  </script>

  <style>
  .exampleClass{
    width:100% !important;
    height:100% !important;
  }
  </style>

其他回答

问题是由jQuery不理解!重要属性,因此无法应用该规则。

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

.importantRule { width: 100px !important; }

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

或者使用attr():

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

然而,后一种方法将取消设置任何先前设置的内联样式规则。所以使用时要小心。

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

上面的attr()方法稍作修改以保留原始样式字符串/财产,并按照falko在注释中的建议进行了修改:

$('#elem').attr('style', function(i,s) { return (s || '') + 'width: 100px !important;' });

在头部附加样式的另一种方法:

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

这将在所有CSS文件之后附加样式,因此它将比其他CSS文件具有更高的优先级,并将被应用。

三个工作示例

我也遇到过类似的情况,但在与.clost()进行了很长一段时间的斗争之后,我使用了.find()。

示例代码

// Allows contain functions 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 1000 ms
});

可供替代的

$('.inner').each(function () {
    this.style.setProperty('height', '50px', 'important');
});

$('#out').find('.inner').css({ 'height': '50px'});

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

可以直接使用.width()设置宽度,如下所示:

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

更新征求意见:您也有这个选项,但它将替换元素上的所有css,因此不确定它是否更可行:

$('#elem').css('cssText', '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); }