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でので、そこに問題があると仮定しています)

助言がありますか?

36

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

$('.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

あなたの質問を誤解していない限り、あなたがしていることは 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