Использование! Важно в функции 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");

еще

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

По-видимому, это не работает. Есть ли другой способ преодолеть !important, который будет?

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

Любые предложения?

Ответ 1

Не применяйте стили к классу. Примените класс к вашему 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

 <div id="myWidget" class="ui-widget-overlay ui-widget-small"> YOUR STUFF </div>

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

Ответ 4

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

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 at http://jsfiddle.net/gaby/qvRSs/

Обновление

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

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

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

demo at http://jsfiddle.net/gaby/qvRSs/3/

Ответ 5

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

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

Ответ 6

Я решил эту проблему следующим образом:

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

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

Ответ 7

Измените атрибут 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");

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