36

次のように宣言されたオーバーレイを含むダイアログがあります。

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

私が持っているページには、2 つの異なるページの高さがあります。オーバーレイでこれを説明するために、JS ファイルでこれを行いました。

小さいものが見える場合:

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

そうしないと

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

どうやらこれはうまくいきません。オーバーライドする別の方法はあり!importantますか？

ページは前後に切り替えることができるので、常にどちらか一方が必要です。また、CSSに追加しない!importantと、オーバーレイの高さが無限に拡大します（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 に答える