Question

我有一个对话框，其中的叠加层声明如下：

     .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中，所以我假设那里存在问题）

有什么建议吗？

Answer 1

有一个技巧可以做到这一点。

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

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

cssText 正在这里诀窍。它将css样式附加为字符串，而不是变量。

Answer 2

不要将样式应用于类。将一个类作为样式应用于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操作你的div，方法是附加一个按钮/点击/悬停你想要使用的任何东西

$('#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的强大功能

Answer 3

您可以尝试使用$(this).attr('style', 'height:1167px !important');我还没有测试过它，但它应该有用。

Answer 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');

演示 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);

演示 http://jsfiddle.net/gaby/qvRSs/3/

Answer 5

除非我误读你的问题，否则你正在做什么does work in jsfiddle。

编辑：我的小提琴仅适用于某些浏览器（到目前为止，Chrome：pass，IE8：失败）。

Answer 6

我解决了这个问题：

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

所以没有内联样式丢失，最后一个覆盖第一个

Answer 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");

享受代码....继续微笑......

在jQuery css（）函数中使用！important

7 个答案: