21

を使用する CSS ルールがある場合、!importantそのルールを削除して!important、JS または jQuery を使用して下流のスタイルをさらに変更できるようにする方法はありますか?

彼らの.css

div.stubborn { display: none !important; }

mine.js

$('.stubborn').fadeIn();  // won't work because of !important flag

残念ながら、ルールを適用するスタイルを制御できない!importantため、回避策が必要です。

4

5 に答える 5

18

残念ながら、 included の下の as inline/internal スタイル!importantを使用せずにオーバーライドすることはできません。!importanttheirs.css

スタイルを定義し!importantて追加し.stubborn、不透明度を調整できます。以下を参照してください。

CSS:

div.hidden_block_el { 
   display: block !important;
   opacity: 0;
}

JS:

$('.stubborn')
    .addClass('hidden_block_el')
    .animate({opacity: 1});

デモ: http://jsfiddle.net/jjWJT/1/

代替アプローチ (インライン)、

$('.stubborn')
    .attr('style', 'display: block !important; opacity: 0;')
    .animate({opacity: 1});

デモ: http://jsfiddle.net/jjWJT/

于 2012-08-09T19:48:24.620 に答える
5

この問題のある画像にタグを追加するだけstyle=""です。うまくいけば、すべての画像に、簡単に定義できる何らかの定義クラスがあります。

$('div.stubborn').attr('style', 'display: inline !important;');​

jsFiddleデモ

于 2012-08-09T19:58:07.797 に答える
1

フェードを適用するには、新しいクラスを作成する必要があります。

CSS:

div.stubborn { display: none !important; }
div.stubborn.fade-ready { display: block !important; opacity: 0; }

JS:

$('.stubborn').addClass('fade-ready').animate({opacity: 1}); //to show
$('.stubborn').fadeOut(function() {$(this).removeClass('fade-ready');}); //to hide

デモはこちら

于 2012-08-09T19:45:40.557 に答える
0

いくつかの方法を試しましたが、別のクラスに CSS スタイル (!important) を追加してから jQuery で削除することで得られた最良の結果:

CSS:

.important-css-here { display: block !important;}

jQuery の場合:

$("#selector").addClass("important-css-here");

次に、必要なときに:

$("#selector").removeClass("important-css-here");

魅力のように働きます;-)

于 2014-05-05T16:50:39.377 に答える
0

元のスタイルをオーバーライドする !important が追加された新しい css スタイルを追加できます

これは、javascript の別の回答からのものです。

function addNewStyle(newStyle) {
var styleElement = document.getElementById('styles_js');
if (!styleElement) {
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = 'styles_js';
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}
styleElement.appendChild(document.createTextNode(newStyle));
}

 addNewStyle('td.EvenRow a {display:inline !important;}')

この答えはここにあります

また、このようなスタイリングを追加できると思います

        .css({ 'display' : 'block !important' });

jQueryで

于 2012-08-09T19:44:00.053 に答える