3

CSSやjavascriptなどを介して、実際にdivを取得し、スタイルを継承しないようにする簡単な方法はありますか？

Webサイトにヘッダーを追加するブックマークレットを作成しています。DOMを次のように変更します。

var bodycontent = document.body.innerHTML;
document.body.innerHTML = '';

var header = document.createElement('div');
var bodycontainer = document.createElement('div');
header.setAttribute('id', 'newdiv-header');
bodycontainer.setAttribute('id','newdiv-bodycontainer');

header.innerHTML = "MY STUFF";
bodycontainer.innerHTML = bodycontent;

document.body.appendChild(header);
document.body.appendChild(bodycontainer);

非常に効果的に私たちが最終的にするのはこれです：

<html>
 <head> ...original head stuff... </head>
 <body>
  <div id="newdiv-header"> MY CONTENT </div>
  <div id="newdiv-bodycontainer"> ...original content of document.body.innerHTML... </div>
 </body>
</html>

すべてが表示されるように、すべてが適切にスタイル設定されているなど。問題は、元のページのスタイルシートがヘッダーの外観に影響を与えることです。フレームやiframeを使用しますが、フレームバスティングを実装しているサイトではこれが機能しなくなります。

アイデアありがとうございます！

4

7 に答える 7

4

私の唯一のアイデアは、関連するすべてのCSSプロパティをデフォルト（または必要なもの）に設定することです。単一のdivにスタイルが適用されないようにする方法はないと思います。

于 2009-07-28T18:12:28.600 に答える
3

divの代わりにiframeを挿入できるかもしれません。

于 2009-07-28T18:13:11.390 に答える
2

@ chris166の提案のもう少しコーシャバージョンは、ターゲット要素の必要なスタイルプロパティをゼロにする特別なCSSルールを作成することです。このように、適切なクラス（この例では「ゼロ」）を要素に追加するだけで、CSS /ブラウザーの魔法が残りを処理します（この例では、パディングをリセットします）。

// in javascript
foo.className += ' zero'; // multiple classes (space seperated)

/* then in CSS */
.foo.zero { padding: 0px; }

この例では、複数のクラスCSSセレクターを使用して特異性の問題を回避していますが、IE6のサポートが必要な場合は、別の方法（つまり、ターゲット要素に一致する他のルールよりも具体的な通常のCSSルール）を使用することをお勧めします。

于 2009-07-28T18:54:50.947 に答える
1

以下のすべてが純粋なエアコードであると言って、これを前置きさせてください:)

反対方向から攻撃した場合はどうなりますか？div内のすべてのスタイルをリセットする代わりに、既存のスタイルシートを変更して、すべてのセレクターが＃newdiv-bodycontainerの子をターゲットにするようにします。

このサイトでは、関連するAPIについて説明しています： http ：//www.javascriptkit.com/domref/stylesheet.shtml

編集：このアイデアを繰り返して、それが機能することを確認するためにいくつかのテストコードをまとめました。以下に含めました。

また、次のサイトも役に立ちました：http ://www.javascriptkit.com/dhtmltutors/externalcss2.shtml

警告：これは製品コードではありません。クロスブラウザーの非互換性（多くあります）を処理したり、複合セレクターを処理したり、複数のスタイルシートを処理したりすることはありません。

for (var i = 0; i < document.styleSheets[0].cssRules.length; ++i) {
    var selector = document.styleSheets[0].cssRules[i].selectorText;
    var declaration = document.styleSheets[0].cssRules[i].style.cssText;

    document.styleSheets[0].deleteRule(i);
    document.styleSheets[0].insertRule('.test ' + selector + '{' + declaration + '}', i);
    alert(document.styleSheets[0].cssRules[i].selectorText);
}

これは、テストに使用されるHTMLです。FirefoxとChromeで実行されますが、IEで実行するには変更が必要です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > 
<html>
<head>
<title>Test</title>

    <style type="text/css">
        .test {
            background-color:red;
            border: black solid 1px;
        }
    </style>
</head>
<body>
    <div class="test" style="width: 10em;">
        This is some text that is probably long enough to wrap.
        <div class="test test2">Test2</div>
    </div>

    <script language="javascript">
        for (var i = 0; i < document.styleSheets[0].cssRules.length; ++i) {
            var selector = document.styleSheets[0].cssRules[i].selectorText;
            var declaration = document.styleSheets[0].cssRules[i].style.cssText;

            document.styleSheets[0].deleteRule(i);
            document.styleSheets[0].insertRule('.test ' + selector + '{' + declaration + '}', i);
            alert(document.styleSheets[0].cssRules[i].selectorText);
        }
    </script>
</body>
</html>
于 2009-07-28T19:05:28.493 に答える
0

これは直接的な助けにはならないかもしれませんが、時間とリソースが許せば、コードをjQueryに移動する方が簡単な場合があります。

jQueryは、HTML要素と、それらの要素との対話に使用される一般的な関数の処理がはるかに優れています。

少なくともあなたの質問では、jQueryでdivを選択してスタイルを解除するのは簡単です。私はあなたのコードもかなり簡単に実装できると確信しています。

ちなみに、このタスクを実行するためだけに、jQueryの単一のスニペットを実行することもできます。

于 2009-07-28T18:58:17.307 に答える
0

IDがあるので、＃newdiv-headerを使用して任意の値を指定できます。

CMSなど、スタイルシートが適用される順序を変更できないものを使用している場合は、！importantを使用できます。

于 2009-07-28T18:18:28.150 に答える
0

どのページにも移動できるようにする必要がある場合は、大量のデータをリセットするか、フレームに配置する必要があります。ただし、フレームは受け入れられないとおっしゃっていたので、Firebugを使用divして、独自のサンドボックス環境での計算されたスタイルのリストを取得できます。

Firebugで、要素を調べます。右ペインに移動し、[スタイル]の横にあるドロップダウン矢印を選択します。次に、[計算されたスタイルを表示]を選択します。確かにコピーはたくさんありますが、フレームの問題は解決します。

于 2009-07-28T19:12:51.863 に答える