3

ここに私のコードがあります

<!doctype html>
<html>
<head>
    <style>
        body {
            color:red;
        }
    </style>
    <script>
        window.onclick = function(){
            document.getElementsByTagName("body").color="blue";
        }
    </script>
</head>
<body>
    here is some text for test
</body>

ブラウザで実行すると（最初は赤です）、ウィンドウをクリックすると、クリックに反応しません。つまり、テキストの色を赤から青に変更する必要がありますが、何も起こりません。どこが間違っていますか？

4

6 に答える 6

3

これを試して：-

デモ

これにより、body 要素に style 属性が追加され、css ルールが上書きされます。

window.onclick = function(){
        document.getElementsByTagName("body")[0].style.color="blue";
    }

要素のプロパティのプロパティである必要style.colorがあり、コレクションを返す場合でも、要素を取得してスタイルを適用するために使用する必要があります。colorstylebody .getElementsByTagNamedocument.getElementsByTagName("body")[0]

はい、スタイルを適用すると、直接要素がクラス css ルールをオーバーライドします

于 2013-05-20T06:17:39.420 に答える
2

スタイル プロパティは、クラスによって適用されるスタイルよりも優先されます。

document.getElementsByTagName("body").color="blue";

これはより好みがあります

また、色は style 属性のプロパティです。

getElementsByTagNameしたがって、ノード リストを返すため、スタイルは次のようになっているはずです。

document.getElementsByTagName("body")[0].style.color="blue";

代わりにクラスを使用することをお勧めします。よりクリーンなためです。

于 2013-05-20T06:15:19.617 に答える
1

インライン CSS はより強力で、他の場所で定義された CSS をオーバーライドします。コードの作業に関しては、次のように少し変更しました。

window.onclick = function(){
        //document.getElementsByTagName("body").color="blue";
document.body.style.color="blue";
    }

デモはこちら

于 2013-05-20T06:23:01.577 に答える
1

JS にエラーがあります。getElementsByTagName単一の要素ではなく、NodeList (配列のようなもの) を返します。NodeList ではなく、要素にプロパティを設定する必要があります。例えば：

document.body.color="blue";

body 要素のプロパティを設定するcolorこと (IIRC、HTML のその部分に近づくのはとても久しぶりです) は、color属性を設定することと同じです。これは廃止された表示ヒント属性です。

CSS仕様には次のように書かれています：

UA は、HTML ソース ドキュメントのプレゼンテーション属性を尊重することを選択できます。その場合、これらの属性は、具体性が 0 の対応する CSS ルールに変換され、作成者スタイル シートの先頭に挿入されたかのように扱われます。したがって、後続のスタイル シート ルールによってオーバーライドされる場合があります。移行段階では、このポリシーにより、スタイル属性がスタイル シートと共存しやすくなります。

したがって、スタイルシートで指定されたスタイルは引き続き適用されます。

一方、プロパティを設定することは、要素の属性style.somethingを変更することと同じです。style 

document.body.style.color="blue";

カスケードでは、!important宣言は別として、属性を介して設定されたプロパティstyleが最も具体的です。

したがって、これら 2 つのルールのうち、青いルールが勝ちます。

于 2013-05-20T06:26:21.480 に答える
0

JS は変更をインラインで挿入し、css に !important がない限り、最も高い優先度を与えます。

コード (document.getElementsByTagName("body").color="blue";) が開発コンソール (Chrome の場合は F12) から機能するかどうかを確認します。それに問題があるようです。ただし、通常は jQuery を介してそのようなアクションを実行するため、デバッグを助けることはできません。また、バニラ JS の色の変更は直感的ではありません。

于 2013-05-20T06:17:32.763 に答える