JavaScript アクセススタイルシートコード_JavaScript のヒント

たとえば、アイコンの上にマウスを移動すると、アイコンにはいくつかのアニメーション効果 (グラデーションの拡大、点滅、色の変化など) が適用されます。これらすべてのフレンドリーな効果は基本的にスタイルに関連しているため、これを 1 つの記事で説明します。 JavaScript がスタイルに対してどのように動作するかを学びました。

技術的な重要なポイント: スタイル。この記事では、CSS スタイルをある程度理解している必要があります。 (読者は CSS の関連内容をググることができます)

操作手順: 1. ページのコード (JS コードを含む) は次のとおりです:

コードをコピー コードは次のとおりです: スタイルの例 div.特殊な { 背景色:赤; 幅:50px;

function getBackGroundColor() { var oDiv = document.getElementById("div1"); alert(oDiv.style.backgroundColor);

div は JS コード オブジェクトで取得され、div オブジェクトの背景色を出力します。すべてが非常に完璧に見えますが、次のような効果は常に期待を裏切ります:

JavaScript が CSS スタイルにアクセスしているようです。この方法では効果は得られません。 理由: CSS データは style 属性ではなくクラスに保存されます。次にやるべきことは、CSS クラスにアクセスする方法です。

2. 幸いなことに、document.styleSheets コレクションが見つかりました。 document.styleSheets には、HTML ページ内のすべてのスタイル シートとすべての 要素への参照が含まれています。 ブラウザが異なるため、スタイルシート内の各ルール（ルール：上記HTMLコードのdiv.specialなどのCSSクラスを指定）へのアクセス方法が異なります。 DOM はスタイル シートごとに cssRule のコレクションを指定しますが、IE はこのコレクション ルールに名前を付けます。したがって、スタイル コレクションを取得する前に、コードに技術的な変更を加える必要があります。

コードをコピー

コードは次のとおりです。 oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules; 各ルールには selectorText 属性が含まれます。上記 HTML の CSS ルールの selectorText の値。このとき、ルールには style 属性も含まれており、style 属性を通じて背景色を取得できます。コードを見てみましょう: コードをコピー

コードは次のとおりです: function getBackGroundColor() { var oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules; alert(oCSSRules[0].style.backgroundColor); 🎜> コード効果: 3. この時点で、スタイルを変更することで背景色を変更できますが、変更する内容が変わってしまうため、これは行わないことをお勧めします。 CSS クラスとその他の参照です。 CSS クラス要素を変更すると背景色も変更されるため、スタイルを変更する必要がある場合は、必ず 1 つの要素の style 属性を直接変更してください。たとえば、 document.getElementById("div1 ").style.backgroundColor="青";

JavaScript アクセス スタイル シート コード_JavaScript のヒント

JavaScript アクセススタイルシートコード_JavaScript のヒント