36

我有一个像这样声明的叠加层的对话框：

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

有什么建议么？

4

7 回答 7

25

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

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

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

cssText在这里起到了作用。它将css样式附加为字符串，而不是变量。

于 2014-02-05T10:31:59.753 回答
18

不要将样式应用于类。将类作为样式应用到您的 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 的强大功能

于 2011-04-28T20:37:58.037 回答
11

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

于 2011-04-28T19:48:32.700 回答
3

您可以使用覆盖所需属性的规则创建动态样式表并将其应用到页面上。

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/上的演示

于 2011-04-28T20:22:02.290 回答
2

除非我误读了您的问题，否则您正在做的事情确实适用于 jsfiddle。

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

于 2011-04-28T19:59:46.663 回答
1

我这样解决了这个问题：

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

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

于 2014-05-05T12:22:36.937 回答
0

请从类中删除高度属性，然后尝试实现您的 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");

享受代码......保持微笑......

于 2011-04-29T06:37:57.593 回答