18

背景画像が必要な要素がありますが、アクセス/変更できないスタイルシートで次のスタイルが指定されています:

#an-element li {
  background: none !important;
}

jQueryでそのスタイルを元に戻すことは可能ですか? background: inhert!importantインライン スタイルを追加する方法と、適用されたスタイルを削除する方法の 2 つの方法で、jQuery を使用して追加しようとしました。どちらも機能しません。

問題を示すフィドルは次のとおりです。http://jsfiddle.net/9bJzk/1/

更新: 間違ったフィドル リンクがありました。もう一度確認してください。

更新 2: スタイルシートを編集できません。タイトルをより明確にするために変更しました。CSS ファイルの読み込み順序を制御できないため、jQuery でこれを行う必要がありますが、jQuery onload を実行できます。

更新 3: 「子猫」の写真 (フィドルを参照) を明示的に設定することはできません。より正確な CSS セレクターのようなセレクターのよう#an-element .image-list liに、これらの画像はその場で書き出されているため、一部の人が示唆しているように。jsFiddle は単なる例です。さらに明確にするために：background: noneスタイルシートの編集ではなく、PURE jQueryで元に戻すことができますか。これに固執してくれてありがとう！

4

6 に答える 6

24 
div { background: none !important }
div { background: red; }

透明です。

div { background: none !important }
div { background: red !important; }

赤い。

!important は別の !important をオーバーライドできます。

CSS ファイルを編集できない場合でも、別の CSS ファイルを追加するか、head タグにスタイル タグを追加できます。

于 2013-07-24T15:12:47.337 に答える
7

この質問にはいくつかの問題が生じます。

問題 #1 - cssの特異性 (重要なルールをオーバーライドする方法)。

仕様によると-このセレクターをオーバーライドするには、セレクターを「より強く」する必要があります。つまり、重要であり、少なくとも1つのID、1つのクラス、およびその他のものを持っている必要があります-あなたによると、このセレクターを作成することは不可能です(変更できないため)ページの内容）。したがって、可能な唯一のオプションは、(js で実行できる) 要素スタイルに何かを入れることです。注: スタイル ルールには、上書きする !important も必要です。

問題 #2 - background は単一のプロパティではありません - プロパティのセットです (仕様を参照)

したがって、変更したいプロパティの正確な名前を知る必要があります（あなたの場合は background-image になります）

問題 #3 - 既に適用されているルールを削除する方法 (以前の値を取得するため)

残念ながら、css には、要素に該当するルールを却下するメカニズムがありません。「より強力な」ルールでオーバーライドするだけです。したがって、値を「継承」または「デフォルト」のような値に設定するだけでは、このタスクを解決することはできません。表示したい値は、親からもデフォルトからも継承されません。この問題を解決するには、いくつかのオプションがあります。

1) 適用したい値が何であるかを既に知っているかもしれません。たとえば、使用されているセレクターに基づいてこの値を見つけることができます。したがって、この場合、セレクター ".image-list li" には background-image: url(" http://placekitten.com/150/50 ")が必要であることがわかるかもしれません。もしそうなら - あなただけがこのスクリプト：

jQuery(".image-list li").attr('style', 'background-image: url("http://placekitten.com/150/50") !important; ');

2）値がわからない場合は、そのような方法でページコンテンツを変更しようとすることができます。無視したいルールは要素の資格がなくなりましたが、表示したいルールは引き続き資格があります。この場合、コンテナ要素から id を一時的に削除できます。コードは次のとおりです。

jQuery("#an-element").attr('id', '');
var backgroundImage = jQuery(".image-list li").css('background-image');
jQuery("#an-element").attr('id', 'an-element');
jQuery(".image-list li").attr('style', 'background-image: ' + backgroundImage + ' !important; ');

フィドルへのリンクは次のとおりですhttp://jsfiddle.net/o3jn9mzo/

3) 3 番目の解決策として、プロパティ値を見つけるために必要な選択に適格な要素を生成できます。次のようなものです。

var backgroundImage = jQuery("<div class='image-list'><li></li></div>").find('li').css('background-image');
jQuery(".image-list li").attr('style', 'background-image: ' + backgroundImage + ' !important; ');

PS: 返事が本当に遅くなってすみません。

于 2015-11-04T02:53:29.280 に答える
0

物事を適用するの<script>直後に、次のようなことができるはずです。<style>!important

var lastStylesheet = document.styleSheets[document.styleSheets.length - 1];
lastStylesheet.disabled = true;

document.write('<style type="text/css">');
// Call fixBackground for each element that needs fixing
document.write('</style>');

lastStylesheet.disabled = false;

function fixBackground(el) {
    document.write('html #' + el.id + ' { background-image: ' +
        document.defaultView.getComputedStyle(el).backgroundImage +
        ' !important; }');
}

ただし、これはおそらく、必要なブラウザーの互換性の種類によって異なります。

于 2013-07-24T16:18:06.977 に答える