Heim > Artikel > Web-Frontend > Beispielcode-Sharing, wie Javascript Inline-Stile und eingebettete Stile erhält
Beispielcode-Sharing, wie Javascript Inline-Stile und eingebettete Stile erhält
- 黄舟Original
- 2017-06-04 10:39:451938Durchsuche
In diesem Artikel werden hauptsächlich Beispiele für das Erhalten von Inline-Stilen und eingebetteten Stilen mit Javascript vorgestellt, auf die sich interessierte Freunde
über StilAttributeLegen Sie das Hintergrundmuster fest
<!--html--> <p id="change"> change color </p>
/*css*/
#change {
border: 1px solid black;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}//js change.style.backgroundColor="purple";
<!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>Problem:
Wenn die Farbe der Farbe Wenn der Picker über eine eingebettete oder externe Einführung hinzugefügt wird, ist das Stilattribut von JavaScript ungültig und der Farbwert kann nicht abgerufen werden.Lösung:
Das Stilattribut von JavaScript kann nur Inline-Stile abrufen. Für extern eingeführte Stile und eingebettete Stile müssen Sieaktuell verwenden Style-Eigenschaft. Allerdings wird currentStyle unter Firefox und Chrome nicht unterstützt und der folgende Kompatibilitätscode muss verwendet werden:
HTMLElement.prototype.defineGetter("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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%;
}
.color-orange {
background-color: orange;
}
.color-red {
background-color: red;
}
.color-blue {
background-color: blue;
}
.color-blank {
background-color: black;
}
.color-green {
background-color: green;
}
.color-pink {
background-color: pink;
}
#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"></li>
<li class="color-red"></li>
<li class="color-blue"></li>
<li class="color-blank"></li>
<li class="color-green"></li>
<li class="color-pink"></li>
</ul>
</p>
</p>
<p id="change">
change color
</p>
<script>
HTMLElement.prototype.defineGetter("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});
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].currentStyle.backgroundColor;
}
}
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonBeispielcode-Sharing, wie Javascript Inline-Stile und eingebettete Stile erhält. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn