ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript がインライン スタイルと埋め込みスタイルを取得する方法を示すコード例の共有
JavaScript がインライン スタイルと埋め込みスタイルを取得する方法を示すコード例の共有
- 黄舟オリジナル
- 2017-06-04 10:39:452017ブラウズ
この記事では主に 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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。