JSPRO1/JS modifica dinamicamente todo o estilo de página HTML (Skinning) .html
A cópia do código é a seguinte:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<TITLE> Estilo de página dinâmica </title>
<link href = "css/blue.css" rel = "Stylesheet" id = "myLink"/>
<script type = "text/javascript">
função gel (id) {
retornar document.getElementById (id);
}
window.onload = function () {
// Substitua o arquivo CSS
var lis = gel ("ulist"). Childnodes;
for (var i = 0; i <lis.length; i ++) {
if (lis [i] .NodEType == 1) {
lis [i] .OnClick = function () {
gel ("mylink"). href = "css/" + this.className + ".css";
};
}
}
};
</script>
</head>
<Body>
<div>
<man> Modifique o estilo de toda a página </span> <br/>
<input type = "text" id = "txt"/>
<input type = "button" value = "submit"/>
</div>
<ul id = "ulist" style = "text-decoração: nenhum; margin-top: 100px;">
<li style = "display: bloco; largura: 30px; altura: 20px; cor de fundo: vermelho;"> </li>
<li style = "display: bloco; largura: 30px; altura: 20px; cor de fundo: azul"> </li>
</ul>
</body>
</html>
JSPRO1/CSS/RED.CSS
A cópia do código é a seguinte:
* {
margem: 0px; preenchimento: 0px;
}
corpo {
Background-Color: #eeeeee;
}
span {
Cor: vermelho;
}
#TXT {
Cor: "Border: 1px Solid #7D1515;
}
.btn {
Background-Color: #A52A2A; Border: Nenhum; Cor: Branco; Largura: 100px; Altura: 28px;
}
JSPRO1/CSS/Blue.css
A cópia do código é a seguinte:
* {
margem: 0px; preenchimento: 0px;
}
corpo {
Background-Color: #eeeeee;
}
span {
Cor: azul;
}
#TXT {
Cor: #0000cd; borda: 1px Solid #006400;
}
.btn {
Background-Color: #0000cd; borda: nenhuma; cor: branca; largura: 100px; altura: 28px;
}