JSPRO1/JS HTMLページスタイル全体(Skinning).html全体を動的に変更します
コードコピーは次のとおりです。
<!doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<Title>ダイナミックページスタイル</title>
<link href = "css/blue.css" rel = "styleSheet" id = "mylink"/>
<script type = "text/javascript">
function gel(id){
document.getElementByID(ID)を返します。
}
window.onload = function(){
// CSSファイルを交換します
var lis = gel( "ulist")。子ども;
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>
<span>ページ全体のスタイルを変更</span> <br/>
<入力型= "text" id = "txt"/>
<入力型= "button" value = "submit"/>
</div>
<ul id = "ulist" style = "テキストゼロ:なし;マージントップ:100px;">
<li style = "display:block; width:30px; height:20px; background-color:red;"> </li>
<li style = "display:block; width:30px; height:20px; background-color:blue"> </li>
</ul>
</body>
</html>
jspro1/css/red.css
コードコピーは次のとおりです。
* {
マージン:0px;パディング:0px;
}
体 {
バックグラウンドカラー:#eeeeee;
}
スパン{
色:赤;
}
#TXT {
色: "border:1px solid#7d1515;
}
.btn {
バックグラウンドカラー:#a52a2a; border:none; color:white; width:100px; height:28px;
}
jspro1/css/blue.css
コードコピーは次のとおりです。
* {
マージン:0px;パディング:0px;
}
体 {
バックグラウンドカラー:#eeeeee;
}
スパン{
色:青;
}
#TXT {
色:#0000CD; Border:1PX Solid#006400;
}
.btn {
バックグラウンドカラー:#0000CD;境界線:なし;色:白、幅:100px;高さ:28px;
}