Question

我想使用jquery为特定div应用height，但无法使用'!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“myclass”，其中divid等于“divL3”

我试过：

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

但不会工作！所以，如何覆盖'!important' css using jquery。

帮助表示赞赏！

Answer 1

试试这个：

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

.setProperty（）使您可以传递表示优先级的第三个参数。

Answer 2

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

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

这将很容易解决您的问题... :)

Answer 3

你可以这样做：

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

使用＆＃34; cssText＆＃34;作为属性名称以及您想要添加到css中的任何值作为它的值。

Answer 4

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

因此，!important只能在 !important

上使用jQuery进行覆盖

尝试

$('#divL3.myclass').attr('style', 'height: 0px !important');

Answer 5

这将像魅力一样工作

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

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

Answer 6

还有另一个技巧可以完成它！您可以从元素中删除myclass并应用高度。像

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

Answer 7

First Id是唯一标识符，因此您无需按其类名搜索div。因此你可以用它的id来过滤div。

尝试以下代码

首先在myClass下添加新的Class属性，如此

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

它将覆盖myClass的高度属性

现在只需将此类添加到div

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

但是高度“0”不会隐藏“divL3”的内容。您宁愿尝试隐藏溢出内容或通过添加css属性display：none

来隐藏整个div 希望它对你有用。

Answer 8

没有use.suppose如果我在风格attribure.it赢得了一些css属性。所以请使用下面的代码

 var styleAttr = $("#divAddDetailPans").attr('style');
        $("#divAddDetailPans").removeAttr('style');
        $("#divAddDetailPans").attr('style', styleAttr.replace('top: 198px !important', 'top: 78px !important'));

Answer 9

我更喜欢创建一个类并将其添加到特定的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>

您可以使用＆＃39;样式＆＃39;选项，但建议这样做：

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

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

Answer 10

$('#divL3.myclass').attr('style', 'height:0px !important');

上述工作会不会有效？

Answer 11

你能试试这个方法，

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

Jquery的：

  $('#divL3').removeClass('myclass').addClass('newclass');

Answer 12

如果你希望稍后覆盖它，我不明白为什么你的CSS很重要。删除CSS高度中的！important。 CSS始终优先于CSS标记样式。

 .myclass{
   height:50px;
  }

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

这对设计来说更好。

Answer 13

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

<强> CSS

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

<强>的jQuery ：

$('#elem').height('30px !important');

Answer 14

我遇到了一个问题，我们允许用户为Kendo网格定义自己的字体大小，但是在设置了值之后，然后以任何方式操作网格，它都会重置字体大小。所以我们实际上为样式标记定义了一个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; }" );

Answer 15

你试过这个吗？

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

如何使用jquery覆盖包含'！important'的css？

15 个答案: