在 jQuery 的 css() 函数中使用 !important

Posted 2023-02-22

【中文标题】在 jQuery 的 css() 函数中使用 !important

【英文标题】：Using !important in jQuery's css() function

【发布时间】：2011-08-15 00:13:31

【问题描述】：

我有一个对话框，上面声明如下：

     .ui-widget-overlay  
         position: absolute;
         left: 8px;
         top: 9px;
         height: 985px !important;
         width: 518px !important; 
      

我拥有的页面将有两个不同的页面高度。为了解决这个问题，我在我的 JS 文件中做了这个：

如果小的可见：

$('.ui-widget-overlay').css("height", "985px !important");

其他

$('.ui-widget-overlay').css("height", "1167px !important");

显然这不起作用。还有其他方法可以超越!important吗？

页面可以来回切换，因此我需要始终拥有其中一个。另外，如果我不将 !important 添加到 css 中，那么覆盖层的高度将无限扩大（它在 facebook 中，所以我假设那里有问题）

有什么建议吗？

【问题讨论】：

重复***.com/questions/2655925/…

查看我的解决方案：***.com/questions/2655925/…

【参考方案1】：

我这样解决了这个问题：

inputObj.css('cssText', inputObj.attr('style')+'padding-left: ' + (width + 5) + 'px !IMPORTANT;');

所以不会丢失内联样式，最后一个会覆盖第一个

【参考方案2】：

有一个技巧可以做到这一点。

$('.ui-widget-overlay').css('cssText', 'height:985px !important;');

$('.ui-widget-overlay').css('cssText', 'height:1167px !important;');

cssText 在这里起到了作用。它将css样式附加为字符串，而不是变量。

【讨论】：

这适用于目标在运行时生成并且许多类被插入到其类属性中的情况。覆盖所有这些只能通过添加样式属性来实现。

【参考方案3】：

请从类中移除 height 属性，然后尝试实现您的 if 和 else 条件。

.ui-widget-overlay  
         position: absolute;
         left: 8px;
         top: 9px;
         width: 518px !important; 
         

if
     $('.ui-widget-overlay').attr("height", "985px");
else
     $('.ui-widget-overlay').attr("height", "1167px");

享受代码......保持微笑......

【参考方案4】：

您可以使用覆盖所需属性的规则创建动态样式表并将其应用到页面上。

var $stylesheet = $('<style type="text/css" media="screen" />');

$stylesheet.html('.tallheight:1167px !important; .shortheight:985px !important');

$('body').append($stylesheet);

现在，当您添加我们新创建的类时，它们将具有优先权，因为它们是最后定义的。

$('.ui-widget-overlay').addClass('tall');

演示地址 http://jsfiddle.net/gaby/qvRSs/

---

更新

对于 IE9 之前的支持使用

var $stylesheet = $('<style type="text/css" media="screen">\
                    .tallheight:300px !important;\
                    .shortheight:100px !important\
                    </style>');

$('body').append($stylesheet);

演示地址 http://jsfiddle.net/gaby/qvRSs/3/

【参考方案5】：

不要将样式应用于类。将类作为样式应用到您的 div！

让jQuery为你做所有的工作

样式表中应该包含这些类

.ui-widget-overlay  
         position: absolute;
         left: 8px;
         top: 9px;
         width: 518px !important; 
         

.ui-widget-small  height: 985px;  

.ui-widget-full  height: 1167px; 

好的，这就是你的 CSS 排序

现在是你的 div

 <div id="myWidget" class="ui-widget-overlay ui-widget-small"> YOUR STUFF </div>

现在您可以使用 jQuery 来操作您的 div，方法是附加到按钮/单击/悬停任何您想要使用的东西

$('#myWidget').removeClass('ui-widget-small').addClass('ui-widget-full')

而且您不需要使用 !important - 当您开始遇到大型 CSS 文件或多个加载样式的问题时，它会真正使用。

这是即时的，但您也可以添加效果

$('#myWidget').hide('slow', function() $('#myWidget').removeClass('ui-widget-small').addClass('ui-widget-full').show('slow')   )

您可以像这样动态地向您的页面添加样式 - 并且要将所有现有的类替换为另一个类，我们可以使用 .attr('class', 'newClass') 代替。

$('body').prepend('<style type="text/css"> .myDynamicWidget  height: 450px;  </style>')
$('#myWidget').attr('class', 'ui-widget-overlay')
$('#myWidget').addClass('myDynamicWidget')

但您不希望使用此方法过度编写现有样式。这应该在“丢失”的情况下使用。只是展示了jQuery的强大

【讨论】：

这是一个很好的建议，但它可能不会解决问题。如果由于某种原因 CSS 不可触碰（可能它位于 CDN 上 48 小时内无法刷新，或者 CSS 由拒绝进行更改的不同团队完成），您可能需要 !important 声明。因此，虽然我同意您的解决方案能够解决问题的根源，但它不一定能解决手头的问题。

很抱歉 - 但您从未提到您无法更改 css。在这种情况下，您将不得不使用最后一种方法 - 动态附加您自己的样式表 - 使用 attr('class...; 删除任何附加的类；并重新应用您自己的样式。这就是您必须使用重要的- 但是如果它是该类中最后一个应用的重要，则它会自动应用，切换将不起作用。您必须删除前一个。

这不适用于您尝试将 CSS 属性设置为动态计算值的情况。例如，当父级变小时，重新调整某些表单元素的大小。

如果需要通过 JS 设置计算高度则不起作用。

【参考方案6】：

除非我误读了您的问题，否则您在做什么does work in jsfiddle。

编辑：我的小提琴仅适用于某些浏览器（到目前为止，Chrome：通过，IE8：失败）。

【讨论】：

哈 +20 尝试。我以前尝试过这样做，但遇到了完全相同的问题。也许它已被修复，或者它只影响某些属性或浏览器。

可能是 jQuery 版本？我在我的 Fiddle 中使用了 1.4.4，如果我们想在不同的浏览器中尝试，我正在使用 Chrome 10.0.648.205。

嗯，它在 IE8 中失败了。我现在应该知道总是先在 IE 中测试 :)

这可能意味着它在 IE7 中为紫色，在 IE6 中为彩虹。

在 Firefox Mac 上也不起作用。更奇怪的是，Chrome Inspector 说红色优先于蓝色。我很困惑。

【参考方案7】：

您可以尝试使用$(this).attr('style', 'height:1167px !important'); 我还没有测试过，但它应该可以工作。

【讨论】：

这没关系，但它will overwrite any existing inline styles。

是的，我在想，在我发布它之后......然后看到@Frits 的帖子并跑出去看看我是否要疯了。您必须先做一些烦人的事情，例如先获取 $(this).attr('style') ，然后检查它是否已经具有您要设置的属性。一定有更好的办法。

$('a').attr('style', $(this).attr('style') + ';background:orange !important'); 可以正常工作。

@Madmartigan 确实，我没有想到它是 CSS 并且具有重复属性会很好。我唯一想说的是让它尽可能具体——所以;background-color:orange !important 会留下任何其他背景属性。

@SsRide360 是的，在所有其他条件相同的情况下，最后设置的项目将优先于之前设置的任何项目。因此，如果您有两个高度，都为!important，那么最后一个将是赢家。 （PS 确保你用; 而不是, 分隔属性，因为它会将第二个变量中的任何内容写入样式属性而不先检查它。）