JavaScript+Css+Html Webページのスキンケア機能を実現
1283 ワード
説明:JavaScript+Css+Html Webページの皮膚交換機能を実現
原理:異なるページの背景を使って異なるCSSの中で保存して、クリックして切り替える時JavaScriptを通じてもとの様式表を新しいCSSに変えて皮膚の機能を完成することができます
コード実装:
1.HTMLコード
2.CSSコード(ページ 1)
3.CSSコード(ページ 2)
4.CSSコード(ページ 3)
4.JavaScriptコード
原理:異なるページの背景を使って異なるCSSの中で保存して、クリックして切り替える時JavaScriptを通じてもとの様式表を新しいCSSに変えて皮膚の機能を完成することができます
コード実装:
1.HTMLコード
[ ]
[ ]
[ ]
2.CSSコード(ページ 1)
body{
/* */
background-color: gray;
}
3.CSSコード(ページ 2)
body{
/* */
background-color: green;
}
4.CSSコード(ページ 3)
body{
/* */
background-color: orange;
}
4.JavaScriptコード
function change(type) {
if (type == "orange") {
document.getElementById("background").href = "orange.css";
}
else if (type == "green") {
document.getElementById("background").href = "green.css";
}
else if (type == "gray") {
document.getElementById("background").href = "gray.css";
}
}