ホームページ > 記事 > ウェブフロントエンド > JavaScript がインライン スタイルと埋め込みスタイルを取得する方法を示すコード例の共有
この記事では主に JavaScript のインライン スタイルと埋め込みスタイルの取得例を紹介します。興味のある方は、
style 属性で背景パターンを設定する
<!--html--> <p id="change"> change color </p>
/*css*/ #change { border: 1px solid black; width: 200px; height: 200px; text-align: center; line-height: 200px; }rree
カラー ピッカーを設定するを参照してください。サイドバーで をクリックし、変更の背景色を選択した色に設定します。このとき、カラーピッカーの色はインライン スタイルを使用して追加されます。
//js change.style.backgroundColor="purple";
問題:
埋め込みまたは外部導入を使用してカラーセレクターの色を追加すると、JavaScriptのstyle属性が無効であり、色の値を取得できません。
解決策:
JavaScript の style 属性は、インライン スタイルのみを取得できます。外部から導入されたスタイルと埋め込みスタイルの場合は、currentStyle 属性を使用する必要があります。ただし、currentStyle は Firefox および Chrome ではサポートされていないため、次の互換性コードを使用する必要があります:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> * { margin: 0; padding: 0; } .wrap { width: 220px; height: 200px; position: absolute; top: 300px; left: -172px; } .open-close { height: 45px; width: 48px; background: url("open-close.png") no-repeat; background-size: contain; border: 1px solid grey; border-left: none; position: absolute; top: 0; right: 0; z-index: 2; } .changer { height: 150px; width: 170px; position: absolute; top: 0; left: 0; border: 1px solid grey; text-align: center; padding-top: 8px; } .list > li { display: block; width: 36px; height: 36px; float: left; margin-left: 9%; margin-top: 10%; } #change { border: 1px solid black; width: 200px; height: 200px; text-align: center; line-height: 200px; } </style> </head> <body> <p class="wrap" id="wrap"> <!--html--> <p class="open-close" id="open"></p> <p class="changer"> <span>颜色选择器</span> <ul class="list"> <li class="color-orange" style="background-color: orange"></li> <li class="color-red" style="background-color: red"></li> <li class="color-blue" style="background-color: blue"></li> <li class="color-black" style="background-color: black"></li> <li class="color-green" style="background-color: green"></li> <li class="color-pink" style="background-color: pink"></li> </ul> </p> </p> <p id="change"> change color </p> <script> var open = document.getElementById("open"); var wrap = document.getElementById("wrap"); var list = document.getElementById("list"); var change = document.getElementById("change"); var color_change = document.getElementsByTagName("li"); change.style.backgroundColor = "purple"; open.onmouseover = function () { wrap.style.left = 0 + "px"; }; open.onclick = function () { wrap.style.left = -172 + "px"; }; for (var i = 0; i < color_change.length; i++) { color_change[i].id = i; color_change[i].onclick = function () { change.style.backgroundColor = color_change[this.id].style.backgroundColor; } } </script> </body> </html>
HTMLElement.prototype.defineGetter("currentStyle", function () { return this.ownerDocument.defaultView.getComputedStyle(this, null); });
以上がJavaScript がインライン スタイルと埋め込みスタイルを取得する方法を示すコード例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。