29

我想height使用 jquery 申请特定的 div 但无法'!important'使用jquery.

这是标记：

<div id="divL1" class="myclass">sometext here</div>
<div id="divL2" class="myclass">sometext here</div>
<div id="divL3" class="myclass">sometext here</div>
<div id="divL4" class="myclass">sometext here</div>

CSS：

.myclass{
 height:50px !important;
}

在这里我想找到class除数等于“divL3”的“myclass”

我试过：

$('#divL3.myclass').css('height', '0px');

但不会工作！那么，如何覆盖'!important' css using jquery.

帮助表示赞赏！

4

15 回答 15

38

尝试这个 ：

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

.setProperty () 使您能够传递代表优先级的第三个参数。

于 2013-11-07T05:25:14.877 回答
19

另一种解决此问题的简单方法是添加样式属性。

$('.selector').attr('style','width:500px !important');

这将轻松解决您的问题... :)

于 2014-04-21T13:55:52.830 回答
5

你可以这样做：

$(".myclass").css("cssText", "height: 0 !important;");

使用“cssText”作为属性名称，以及您想要添加到 css 中的任何内容作为它的值。

于 2014-09-12T23:37:55.157 回答
3

内联样式无法覆盖样式表中给出的 !important。

因此!important只能通过使用来!important覆盖jQuery

试试喜欢

$('#divL3.myclass').attr('style', 'height: 0px !important');
于 2013-11-07T05:28:23.657 回答
2

这将像一个魅力

    $( '#divL3' ).css("cssText", "height: 0px !important;")

这是小提琴http://jsfiddle.net/abhiklpm/Z3WHM/2/

于 2013-11-07T06:07:49.727 回答
1

没有用。假设我在样式属性中有一些 CSS 属性。它不起作用。所以请使用下面的代码

 var styleAttr = $("#divAddDetailPans").attr('style');
        $("#divAddDetailPans").removeAttr('style');
        $("#divAddDetailPans").attr('style', styleAttr.replace('top: 198px !important', 'top: 78px !important'));
于 2014-03-18T05:21:49.220 回答
1

First Id 是唯一标识符，因此您无需通过类名搜索 div。因此，您可以通过 id 过滤 div。

试试下面的代码

首先像这样在 myClass 下面添加新的 Class 属性

<style>
            .myclass{
                height:50px !important;
                border: 1px solid red;
            }
            .testClass{
                height: 0 !important;
            }
        </style>

它将覆盖 myClass 的 height 属性

现在只需将此类添加到 div

$('#divL3').addClass('testClass');

但是将高度设为“0”不会隐藏“divL3”的内容。您宁愿尝试通过添加 css 属性 display:none 来隐藏溢出内容或隐藏整个 div

希望它对你有用。

于 2013-11-07T05:55:00.157 回答
1 
$('#divL3.myclass').attr('style', 'height:0px !important');

像上面的东西会起作用吗？

于 2013-11-07T05:24:59.353 回答
1

还有一个技巧可以完成它！！！！您可以从元素中删除myclass并应用高度吗？喜欢

$('#divL3.myclass').removeClass('myclass').css('height', '0px');
于 2013-11-07T05:25:17.553 回答
1

我更喜欢创建一个类并将其添加到特定的 div，例如

这可以是内联的，也可以是外部 CSS 文件：

<style>
.class-with-important { height: 0px !important; }
</style>

如果这是永远不会改变的东西，您可以手动将类添加到该 div：

<div id="divL3" class="myclass class-with-important">sometext here</div>

或者您可以使用 jQuery 在该页面的底部添加此脚本标记

<script>
 $(document).ready(function(){
   $('#divL3').addClass("class-with-important");
 });
</script>

您可以使用 'style' 选项，但建议这样做：

 var currentStyle = $('#divL3').attr('style');
 $('#divL3').attr('style', currentStyle + ' width:500px !important;');

这样您就不会覆盖现有样式，以防第三方插件向您的页面添加任何动态样式，如果您使用 WordPress 等 CMS，这并不罕见。

于 2015-11-15T18:11:52.527 回答
0

可以试试这个方法吗

        <style type="text/css">
        .myclass{
             height:50px !important;
        }
        .newclass{
             height:0px;
        }
        </style>

查询：

  $('#divL3').removeClass('myclass').addClass('newclass');
于 2013-11-07T05:38:24.843 回答
0

如果您希望稍后覆盖它，我不明白为什么您的 CSS 中有 !important 。删除 CSS 高度中的 !important。CSS 始终将您的 HTML 标签样式优先于 CSS。

 .myclass{
   height:50px;
  }

  $('#divL3.myclass').css('height', '0px');

这更适合设计。

于 2015-02-11T20:47:11.693 回答
0

我遇到了一个问题，我们允许用户为 Kendo Grids 定义自己的字体大小，但是在设置值之后，然后以任何方式操作网格，它会重置字体大小。所以我们实际上为样式标签定义了一个 ID，并且每次都用正确的 CSS 更改 html。

在我们的主页顶部，我们通过保存在他们的 PHP 会话变量或数据库中的内容来设置字体大小。

echo "<style id='grid-style'>table { font-size: $Grid_Font_Size !important; }</style>";

然后为了更改它，我们执行以下 jquery，其中 font_size 是新大小

$( "#grid-style" ).html( "table { font-size: " + font_size + "px !important; }" );
于 2017-11-16T22:15:08.570 回答
0

我有同样的问题，所以我在 css 中设置了 max-height，然后用 jQuery 覆盖了高度：

css

#elem{
  max-height:30px !important;
}

jQuery :

$('#elem').height('30px !important');
于 2015-10-23T09:38:59.123 回答
-5

你试过这个吗？

$('#divL3.myclass').css('height', '0px !important');
于 2013-11-07T05:23:07.083 回答