5

<body>CSSで外側のタグの背景画像を設定しようとしています:

<html>
 <body>
  ...
   #document
    <html>
     <body>
     </body>
    </html>
  ...
 </body>
</html>

<body>ただし、他のタグに影響を与えずにタグ の 1 つを選択することさえできないようです。それらにはIDがなく、子セレクターを介して選択しようとすると、#document物事が複雑になります(それが何であるかさえわかりません)。みたいなことをやってみるとbody html body {...}、 は#document越えられないバリアのような働きをするので、内側の body タグを選択しません。

body タグの 1 つを選択する方法についてのアイデアはありますか?

4

3 に答える 3

14

指定されたリストは、DOM インスペクタ ビューのようです。この場合、#documentは ID が "document" の任意の要素を参照するのではなく、 内でホストされているドキュメントを参照します<iframe>(「 」を参照Node.nodeName)。これは、Firefox と Chrome の DOM インスペクタで確認できます。data:text/html,<iframe>実際、いずれかのブラウザで をポイントし、インスペクタを開いて<iframe>ノードを展開することで、今すぐ試すこともできます。IE はネストされたツリーも表示しますが、#documentマーカーはありません。

背景画像がホスト ドキュメントから iframe に流れている場合は、iframe 内のドキュメントに独自の背景がないことを意味します。

セレクターは、複数の/ネストされたドキュメント ツリーを通過できません。それらはコンテキスト ドキュメントにローカライズされます。<iframe>つまり、を含むドキュメント内の内でホストされているドキュメント内の要素をターゲットにすることはできません<iframe>。内のドキュメント内の要素にスタイルを適用する必要がある場合<iframe>、CSS をその内部ドキュメント内に直接適用する必要があり、セレクターはそのドキュメントだけを操作しているかのように記述します。

与えられたリストが DOM インスペクタ ビューではなく実際のソース マークアップであり#document、実際には "document" という ID を持つ任意の要素である可能性はやや低いですが、内部要素<html>と<body>要素は HTML DOM として取り消されています。一度に正確に 1<html>つの<body>要素のみを含めることができます。これらはあなたの外側のものであり、内側のものではありません. その場合、代わりに背景を選択して適用することもでき#documentますが、正しく機能するという保証はありません。

于 2013-08-01T12:54:14.680 に答える
0

あなたが考えていることは、<head></head>内にタグがあり#document、タグが<iframe></iframe>含まれている必要があります<link rel="stylesheet" type="text/css" href="Null.css">。埋め込みと変更を介してこれを変更したい場合は、jQuery が必要になりますが、jQuery の保証はありません。まず第一に、それをどこに置くかを知る必要があり、第二に、複数のものが使用すると機能しない可能性があるためです。とiframe内のドキュメントを含むページの同じ ID/クラスiframe。

于 2014-03-17T21:23:30.620 に答える
-2

Jquery の使用

jQuery の .content() 関数を使用してアクセスできます。

$('yourIframe').contents().find('#yourItemYouWantToChange').css({
    background: 'red'
});
于 2013-08-01T13:11:14.623 に答える