Как переопределить css, содержащий «! Important» с помощью jquery?

Question

Я хочу применить 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", где DIVID приравнивает "divL3"

Я попытался с :

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

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

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

Answer 1

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

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

Answer 2

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

Would что-то вроде выше работы?

Answer 3

Попробуйте:

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

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

Answer 4

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

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

Answer 5

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

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

Попробуйте как

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

Answer 6

Вы можете попробовать этот метод,

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

Jquery:

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

Answer 7

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

Try следующий код

первым добавить новое свойство класса ниже MyClass, как это

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

она перекрывает высоту свойство MyCLASS

теперь просто добавить этот класс для Div

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

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

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

Answer 8

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

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

вот скрипку http://jsfiddle.net/abhiklpm/Z3WHM/2/

Answer 9

нет use.suppose, если у меня есть некоторые свойства CSS в стиле attribure.it не work.so, пожалуйста, используйте ниже код

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

Answer 10

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

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

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

Answer 11

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

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

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

Answer 12

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

.myclass{ 
    height:50px; 
    } 

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

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

Answer 13

Я была такая же проблема, поэтому я создал Макс-высоту в CSS, а затем перекрытая высоту JQuery:

CSS

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

JQuery:

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

Answer 14

Я предпочитаю создавать класс и добавлять его к определенному 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> 

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

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

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

Answer 15

У меня возникла проблема, когда мы разрешаем пользователям определять собственный размер шрифта для сетей Kendo Grids, однако после установки значения и последующего манипулирования сеткой он сбросил размер шрифта. Таким образом, мы фактически определили идентификатор для тега стиля и каждый раз меняем 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; }");