域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)
這篇文章主要介紹了前端html換膚功能的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
先把代碼奉上，自取自用。直接創(chuàng)建html文件，直接粘貼進(jìn)去就能用，不能用隨便罵。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width: 100%;height:100%;background-color: red;position: absolute;top:0;left:0;right:0;bottom:0;}
#box>div{float:right;width: 30px;height: 30px;margin:10px;border: 1px #333 solid;}
#box1{background-color: red}
#box2{background-color: yellow}
#box3{background-color: blue}
#box4{background-color: green}
</style>
</head>
<body>
<div id="box">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
</div>
</body>
<script>
var box = document.getElementById('box');
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var box4 = document.getElementById('box4');
var box5 = document.getElementById('box5');
box1.onclick = function(){
box.style.backgroundColor = 'red';
}
box2.onclick = function(){
box.style.backgroundColor = 'yellow';
}
box3.onclick = function(){
box.style.backgroundColor = 'blue';
}
box4.onclick = function(){
box.style.backgroundColor = 'green';
}
box5.onclick = function(){
box.style.backgroundColor = 'transparent';
}
</script>
</html>
開(kāi)始注釋了，代碼濃縮在一起了，不難理解
html基本標(biāo)簽這塊兒就不說(shuō)了，先說(shuō)body下的文本樣式吧
<body>
<div id="box">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
</div>
</body>
最后要用到JS，在這里寫(xiě)以 “ id ” 命名的話，等下可以少寫(xiě)一些代碼。
第一個(gè)跟第四個(gè)是有區(qū)別的，區(qū)別在于第一個(gè)顏色是透明，而第二個(gè)顏色是紅色—跟底色相同。
<style>
#box{width: 400px;
height: 400px;background-color: red;border: 1px #000 solid;}
#box>div{float:right;width: 30px;
height: 30px;margin:10px;border: 1px #333 solid;}
#box1{background-color: red}
#box2{background-color: yellow}
#box3{background-color: blue}
#box4{background-color: green}
#box5{}
</style>
這塊兒是Css樣式，
width：設(shè)置盒子寬度；height：設(shè)置盒子高度；background-color：設(shè)置盒子背景顏色；border：設(shè)置盒子邊框
(1px是邊框的粗細(xì)程度，#333是16進(jìn)制顏色，solid是邊框樣式，solid代表實(shí)線)；float：是浮動(dòng)
(盒子底下充滿了水，盒子漂浮起來(lái)了；left就是向左邊漂浮，right就是向右邊漂浮); margin：就是外邊距
(盒子不喜歡擠在一起，為了避免擠壓，我們讓它距離上、下、左、右的任何東西都有一定的間隙);
red是紅色；yellow是黃色；blue是藍(lán)色；green是綠色
var box = document.getElementById('box');
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var box4 = document.getElementById('box4');
var box5 = document.getElementById('box5');
這段是DOM選擇器，單獨(dú)選中每一個(gè)盒子，方便理解。如果想選中所有盒子，
var boxs = box.SelectorAll(‘div’);
這樣一句就全部選中了
box1.onclick = function(){
box.style.backgroundColor = 'red';
}
中的transparent是背景顏色的默認(rèn)值，寫(xiě)成這樣就意味著還原它本來(lái)的樣子，那就是透明了。
這句話的含義是：
選中你需要操作的box
是倒數(shù)第一個(gè)——紅色的小方塊
給了box 一個(gè)點(diǎn)擊事件(onclick)，function(){}是執(zhí)行的函數(shù)，
當(dāng)box1被onclick的時(shí)候，box就function(){}
這樣說(shuō)就很容易理解了，那我們來(lái)看看function(){}里面都有什么
好簡(jiǎn)單啊，就這么一句。
這句話的意思就是讓box的背景顏色變?yōu)榧t色(red);
style：風(fēng)格，樣式； backgroundColor：是背景顏色； (在JS中，“ - ”
一般不能正常使用，所以被替換成了下一個(gè)單詞的首字母大寫(xiě)，也就是：
background-color ==> backgroundColor );
最后的：
box.style.backgroundColor = 'transparent';
總結(jié)
到此這篇關(guān)于前端html換膚功能的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)前端html換膚內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
來(lái)源：腳本之家
鏈接：https://www.jb51.net/web/741596.html
申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
