Maison > Article > interface Web > Exemple de partage de code montrant comment javascript obtient les styles en ligne et les styles intégrés
Exemple de partage de code montrant comment javascript obtient les styles en ligne et les styles intégrés
- 黄舟original
- 2017-06-04 10:39:451936parcourir
Cet article présente principalement des exemples d'obtention de styles en ligne et de styles intégrés avec javascript, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à
via le styleAttributDéfinissez le motif d'arrière-plan
<!--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>Problème :
Quand la couleur de la couleur picker Lorsqu'il est ajouté à l'aide d'une introduction intégrée ou externe, l'attribut de style de JavaScript n'est pas valide et la valeur de couleur ne peut pas être obtenue.Solution :
L'attribut style de JavaScript ne peut obtenir que des styles en ligne pour les styles introduits en externe et les styles intégrés, vous devez utilisercurrent. Propriété de style. Cependant, currentStyle n'est pas supporté sous Firefox et Chrome, et le code de compatibilité suivant doit être utilisé :
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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn