どのようにしてdiv HTML要素の "スタイルを解除する"ことができますか？

CSSやjavascriptなどの簡単な方法がありますかdivを取ってスタイルを継承しないようにするには何か？どのようにしてdiv HTML要素の "スタイルを解除する"ことができますか？

私は、ウェブサイトにヘッダーを追加するブックマークレットを作成しています。次のように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を使用したいと思いますが、これはフレームバスト処理を実装するサイトを破壊します。

ありがとうございました！

出典

2009-07-28 Mala

は私が次のすべてが純粋な空気コード:)

であると言って、このはじめてみましょうあなたは、他の方向からそれを攻撃した場合は？ div内のすべてのスタイルをリセットする代わりに、すべてのセレクタが＃newdiv-bodycontainerの子を対象とするように既存のスタイルシートを変更します。

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

が編集：このアイデアに反復処理、私はそれが動作することを確認するために一緒にいくつかのテストコードを置きます。私はそれを以下に含めました。 http://www.javascriptkit.com/dhtmltutors/externalcss2.shtml

WARNING：：これは、生産コードではありません

は私も有用な、次のサイトを見つけました。それはブラウザ間の非互換性（多くのものがある）を処理したり、複合セレクタを処理したり、複数のスタイルシートを処理したりしません。

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-28 19:05:28 AaronSieb

それはブックマークレットだ、彼はそれが – geowa4

なぜに行くことをすべてのページのスタイルシートを変更することはできませんか？スタイルシートファイルを物理的に変更するという意味ではありません。 JavaScriptを使って動的に変更することを意味します。 – AaronSieb

これはむしろ有望です！私はこれを試して、それがどのように行くのかを知らせます – Mala

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

出典

2009-07-28 18:12:28 chris166

iはのdocument.getElementById（「ますnewDiv-ヘッダ」）「」へ。スタイルと設定し、すべてのすべてをループするためにJavaScriptを使用してみましたが、それはうまくいきませんでしたか？私は実際にそれを手作業でしようとすることは実際にはできません – Mala

''に設定すると、デフォルトにリセットされません。 – jimyi

おそらくdivの代わりにiframeを挿入することができます。

出典

2009-07-28 18:13:11 jhurshman

これは私の唯一の手段です。最初のスクリプト、およびその後のiframe対象 – Mala

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

スタイルシートが適用される順序に影響を与えないCMSなどを使用している場合は、！importantを使用できます。

出典

2009-07-28 18:18:28

それはブックマークレットだ - 私のためらいが、それは何が表示される前に発生する必要がある要求の数を倍増するということです。 http://en.wikipedia.org/wiki/Bookmarklet – jimyi

問題は、これが任意のページ上で実行することができるようにする必要があるので、私はリセットする必要があるでしょうCSSルールの数が驚異的に巨大な – Mala

@ chris166のやり方は、目標要素の必要なスタイルプロパティをゼロにする特別なCSSルールを作成することです。こうすることで、適切なクラス（この例では「0」）を要素に追加するだけで、CSS /ブラウザのマジックが残りの部分を処理します（この例ではパディングをリセットします）。

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

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

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

出典

2009-07-28 18:54:50

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

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

少なくとも、jQueryでdivを選択して非選択にするのは簡単です。あなたのコードも実装するのが合理的に簡単であると私は喜んで賭けています。

ちょっとだけ、この作業を行うためにjQueryのスニペットを実行することもできます。

出典

2009-07-28 18:58:17 EvilChookie

だけ見上げjQueryのであるということです...そしてそれは栄光に見えます。 *チュートリアルを読む* – Mala

*一口*私はこれに戻っているように見えます。私はjQueryを読んだことがあります。これは本当に素晴らしいことです。私はコードのほとんどを移行しました。これまで以上にうまく動作します。しかし、この問題に関しては、*このタスクを達成するためにjQueryの単なるスニペットをどうやって実行することができますか？ – Mala

http://docs.jquery.com/Attributes/removeClass - これは、あなたが探しているファッションにdiv要素をunstyle必要があります。基本的なdocument.readyの中にremoveClassを投げるだけで、ガスで調理するべきです。 – EvilChookie

それは任意のページに行くことができなければならない場合は、いずれかのもののトンをリセットしたり、それを置くために持ってしようとしていますフレーム内でしかし、あなたはフレームが受け入れられないと言ったので、Firebugを使って自分のサンドボックス環境でdivの計算されたスタイルのリストを得ることができます。 Firebugので

、要素を検査します。右ペインに移動し、[スタイル]の横にあるドロップダウン矢印を選択します。次に、「計算されたスタイルを表示」を選択します。確かにコピーがたくさんありますが、フレームの問題は解決します。あなたの提案を自動化する方法を知っています...

出典

2009-07-28 19:12:51 geowa4

どのようにしてdiv HTML要素の "スタイルを解除する"ことができますか？

答えて

関連する問題