web-dev-qa-db-ja.com

jQuery css（）関数で！importantを使用する

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

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

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

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

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

else

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

どうやらこれは動作しません。 !importantを乗り越える別の方法はありますか？

ページは前後に切り替えることができるので、常にどちらか一方を用意する必要があります。また、!importantをcssに追加しない場合、オーバーレイの高さは無限に拡大します（facebookでので、そこに問題があると仮定しています）

助言がありますか？

javascriptjquerycssjquery-uijquery-dialog
36
Stanley Cup Phil

これを行うコツがあります。

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

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

cssTextはここでトリックをしています。変数としてではなく、文字列としてCSSスタイルを追加しています。

24
ghosh'.

$(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 athttp://jsfiddle.net/gaby/qvRSs/

update

IE9以前のサポート用

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

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

demo athttp://jsfiddle.net/gaby/qvRSs/3/

3
Gabriele Petrioli

あなたの質問を誤解していない限り、あなたがしていることは jsfiddleで動作します です。

EDIT：私のフィドルは一部のブラウザでのみ動作します（これまでのところ、Chrome：合格、IE8：失敗）。

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