1

現在のページに div を追加した JavaScript ブックマークレットを開発しました。

しかし、問題は、ページの元の CSS コード (ブックマークレットにも独自の CSS があります) のために div とそのコンテンツが読み込まれると、div の外観が壊れることです。

つまり、すべてのページで、一部の要素が異なって見えます (ラベルの高さ、テキストエリアの背景色など)。

あなたが知っているこの障害を修正する方法はありますか？CSS または JavaScript ソリューションを使用できます。

4

3 に答える 3

2

あなたが言っているのは、ページの CSS が、挿入したコンテンツのデフォルトのスタイリングをオーバーライドするということです。これはおそらく、コンテンツのすべてのスタイル属性を指定していない (および相対値を使用していない) か、具体性が十分に高くないという2 つの理由のいずれかが原因です。

すべてのスタイル属性を指定

コンテンツが次のようになっているとします。

<div id="#cool-bookmarklet">Here is some content</div>

CSS は次のようになります。

#cool-bookmarklet {
    color: #000000;
    font-size: 80%;
}

上記の2つの問題。2 つのスタイル属性のみが宣言されているため、他のすべての属性は他のスタイルから継承されます。ページにこのような CSS があった場合はどうなるでしょうか。

div {
    width: 70%;
    background-color: #000000;
}

その CSS がコンテンツ (div) に適用されるため、問題が発生します。div 'cool-bookmarklet' は親の 70% の幅になり、背景色は黒になります。良くない。

また、font-size は相対値です。つまり、継承された値の 80% になります。したがって、ページで指定された font-size が 10px の場合、フォントは 8px になります。ここでは、継承されたスタイルの問題を回避するために、明示的なサイズ変更を使用するのがおそらく最善です。

継承されたスタイルを避けるために、CSS は次のようになります。

#cool-bookmarklet {
    color: #000000;
    font-size: 12px;
    width: 400px;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    font-weight: normal;
    /* etc, etc */
}

特異性

多くの人が学んでいない CSS の部分があり (私も理解するのに時間がかかりました)、それは特異性と呼ばれます。特異性は、2 つのセレクターが競合する場合に要素に適用する CSS スタイルをブラウザーが決定するために使用されます。

CSS仕様から：

セレクターの特異性は、次のように計算されます (仕様から)。

  • 宣言がセレクタ付きのルールではなく 'style' 属性である場合は 1、そうでない場合は 0 (= a) (HTML では、要素の "style" 属性の値はスタイル シートのルールです。これらのルールにはセレクタがありません。つまり、a=1、b=0、c=0、d=0 です。)
  • セレクター内の ID 属性の数をカウントする (= b)
  • セレクター内の他の属性と疑似クラスの数をカウントします (= c)
  • セレクター内の要素名と疑似要素の数を数える (= d)

4 つの数 abcd を (基数が大きい数体系で) 連結すると、特異性が得られます。

したがって、html 要素の style 属性の = スタイル。b = id セレクター、c = クラス名と属性、d = タグ名。2 つのセレクターが同じ要素をターゲットにしている場合は、特異性が最も高いセレクターが「勝ち」ます。

少しややこしいですが、数回試してみるとコツがつかめます。

CSS に次の 2 つのルールがあるとします。

#cool-bookmarklet { color: red; }
div { color: blue; }

そして内容：

<div id="cool-bookmarklet">Here is some content</div>

セレクター「#cool-bookmarklet」の特異性は 100 (a=0、b=1、c=0、d=0) になります。セレクター 'div' の特異性は 1 (a=0、b=0、c=0、d=1) です。「#cool-bookmarklet」が勝ち、div に赤いテキストが表示されます。

ブックマークレットがスタイルシートを挿入してコンテンツのスタイルを設定する場合、具体性がより高い場合、ページ上の他の CSS がそれをオーバーライドする可能性があるため、これは重要です。多くの場合、コンテンツに ID を付与するのが最も簡単です (特定性が高い 'b' です)。これにより、コンテンツをターゲットにすることができ、他のスタイルのオーバーライドについて心配する必要がなくなります。

それが役立つことを願っています!

于 2011-01-30T21:32:40.133 に答える
2

あなたが知っているこの障害を修正する方法はありますか?

はい、DIV 内の関連するすべてのプロパティを定義し、次のようにし!importantます。

<div style="width: 300px !important; line-height: 1em !important....">

完全にフェイルセーフな方法は他にありません。私が見たすべての外部ウィジェットは、この方法でそれを行います。

于 2011-01-30T21:02:32.680 に答える
0

私は質問を完全に理解していません。おそらく、小さなスニペットが役立つでしょうか？

動的に追加する要素のスタイルが既存のスタイルによって上書きされることが心配な場合は、!importantタグを追加できます。しかし、スタイルがインラインの場合 (これは常にブックマークレットで発生します)、その必要はありません。

于 2011-01-30T21:04:23.563 に答える