Как переопределить css, содержащий "! Important", используя jquery?

Я хочу применить height для конкретного div с помощью jquery, но не могу переопределить ключевое слово '!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", где div равно "divL3"

Я пробовал с помощью:

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

но не работает! поэтому, как переопределить '!important' css using jquery.

Помогите оценить!

ОТВЕТЫ

Ответ 1

Попробуйте следующее:

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

.setProperty() позволяет передать третий аргумент, который представляет приоритет.

Ответ 2

Еще один простой способ решить эту проблему, добавив атрибут стиля.

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

Это позволит легко решить вашу проблему...:)

Ответ 3

Вы можете сделать это:

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

Использование "cssText" в качестве имени свойства и того, что вы хотите добавить в значение css в качестве значения.

Ответ 4

встроенный стиль не может переопределить важные значения в таблицах стилей.

Поэтому !important можно переопределить только с помощью !important вдоль jQuery

Попробуйте

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

Ответ 5

Это будет работать как шарм

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

здесь скрипка http://jsfiddle.net/abhiklpm/Z3WHM/2/

Ответ 6

Есть еще один трюк, чтобы сделать это! Вы можете удалить myclass из элемента и применить высоту. Как

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

Ответ 7

Первый идентификатор - это уникальный идентификатор, поэтому вам не нужно искать div по имени класса. поэтому вы можете фильтровать div по этому идентификатору.

Попробуйте выполнить следующий код

сначала добавьте новое свойство класса ниже myClass, как это

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

он переопределит свойство height myClass

теперь просто добавьте этот класс в div

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

но высота "0" не будет скрывать содержимое "divL3". вы скорее попытаетесь скрыть содержимое переполнения или скрыть весь div, добавив отображение свойства css: none

надеюсь, что это сработает для вас.

Ответ 8

no use.suppose, если у меня есть некоторые свойства css в стиле attribue.it не будет работать. Пожалуйста, используйте ниже код

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

Ответ 9

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

Будет ли что-то подобное выше работать?

Ответ 10

Можете ли вы попробовать этот метод,

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

Jquery:

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

Ответ 11

Я не понимаю, почему у вас есть! важно в вашем CSS, если вы надеетесь переопределить его позже. Удалите! Важно в вашей высоте CSS. CSS всегда выделяет стили HTML-тегов по CSS.

 .myclass{
   height:50px;
  }

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

Это лучше для дизайна.

Ответ 12

У меня была такая же проблема, поэтому я установил max-height в css, а затем переопределил высоту с помощью jQuery:

CSS

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

JQuery

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

Ответ 13

Я предпочитаю создавать класс и добавлять его к определенному div, например

Это может быть как встроенный, так и внешний файл CSS:

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

Если это то, что никогда не изменится, вы можете вручную добавить класс к этому div:

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

или вы можете использовать jQuery для добавления этого тега script в нижней части этой страницы

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

Вы можете использовать опцию "стиль", но рекомендую сделать это следующим образом:

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

Таким образом, вы не переопределяете существующий стиль, если сторонний плагин добавляет на вашу страницу динамический стиль, что не является необычным, если вы используете CMS, например WordPress.

Ответ 14

У меня возникла проблема, когда мы разрешаем пользователям определять собственный размер шрифта для Kendo Grids, однако после установки значения и последующего манипулирования сетью он будет reset размер шрифта. Таким образом, мы фактически определили ID для тега стиля и каждый раз меняем html с соответствующим CSS.

В верхней части нашей главной страницы мы устанавливаем размер шрифта тем, что сохраняется в их переменной сеанса 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; }" );

Ответ 15

Вы пробовали это?

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