it-swarm.com.ru

Использование! Important в функции jQuery css ()

У меня есть диалог с оверлеем, объявленным так:

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

У моей страницы будет две разных высоты страницы. Чтобы объяснить это с помощью оверлея, я сделал это в моем файле JS:

Если маленький виден:

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

else

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

Видимо, это не работает. Есть ли другой способ перегрузить !important?

Страница может переключаться вперед и назад, поэтому мне нужно всегда иметь одно или другое. Кроме того, если я не добавлю !important в css, то оверлей будет увеличиваться по высоте до бесконечности (в Facebook, так что я предполагаю, что там есть проблема)

Какие-либо предложения? 

36
Stanley Cup Phil

Не применяйте стили к классу. Примените класс к вашему 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 id="myWidget" class="ui-widget-overlay ui-widget-small"> YOUR STUFF </div>

Теперь вы можете использовать jQuery для манипулирования вашими div-объектами, прикрепляя к кнопке/щелчку/наведению все, что вы хотите использовать

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

И вам не нужно использовать! Важный - это действительно используется, когда у вас возникают проблемы с большими файлами 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

16
ppumkin

Есть хитрость, чтобы сделать это.

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

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

cssText делает трюк здесь. Он добавляет стили CSS как строку, а не как переменную. 

23
ghos-h

Вы можете попробовать использовать $(this).attr('style', 'height:1167px !important'); Я не проверял его, но он должен работать.

11
Dan Blows

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

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

$stylesheet.html('.tall{height:1167px !important;} .short{height:985px !important}');

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

Теперь, когда вы добавите наши недавно созданные классы, они будут иметь приоритет, так как они определены последними.

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

demo наhttp://jsfiddle.net/gaby/qvRSs/


Обновление

Для поддержки до IE9 используйте

var $stylesheet = $('<style type="text/css" media="screen">\
                    .tall{height:300px !important;}\
                    .short{height:100px !important}\
                    </style>');

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

demo наhttp://jsfiddle.net/gaby/qvRSs/3/

3
Gabriele Petrioli

Если я не прочитал ваш вопрос, то, что вы делаете работает в jsfiddle

EDIT: Моя скрипка работает только в некоторых браузерах (пока Chrome: pass, IE8: fail).

2
David Ruttka

Я решил эту проблему так:

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

Таким образом, встроенный стиль не теряется, а последний переопределяет первый.

1
Burner

Удалите атрибут 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");

Наслаждайтесь кодом .... продолжайте улыбаться ...

0
Nirav