50行代碼換5種膚色，包含透明
先把代碼奉上，自取自用。直接創(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>
開始注釋了，代碼濃縮在一起了，不難理解
html基本標(biāo)簽這塊兒就不說了，先說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，在這里寫以 “ id ” 命名的話，等下可以少寫一些代碼。
這個(gè)紅色的大盒子就是#box,我給它添加了一個(gè)默認(rèn)顏色，如果不加就是透明。
我給每個(gè)盒子都添加了邊框，容易區(qū)分塊兒與塊兒
第一個(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)
(盒子底下充滿了水，盒子漂浮起來了；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';
}
這句話的含義是：
選中你需要操作的box
是倒數(shù)第一個(gè)——紅色的小方塊
給了box 一個(gè)點(diǎn)擊事件(onclick)，function(){}是執(zhí)行的函數(shù)，
當(dāng)box1被onclick的時(shí)候，box就function(){}
這樣說就很容易理解了，那我們來看看function(){}里面都有什么
好簡(jiǎn)單啊，就這么一句。
這句話的意思就是讓box的背景顏色變?yōu)榧t色(red);
style：風(fēng)格，樣式； backgroundColor：是背景顏色； (在JS中，“ - ”
一般不能正常使用，所以被替換成了下一個(gè)單詞的首字母大寫，也就是：
background-color ==> backgroundColor);
最后的：
box.style.backgroundColor = 'transparent';
中的transparent是背景顏色的默認(rèn)值，寫成這樣就意味著還原它本來的樣子，那就是透明了。
總結(jié)
到此這篇關(guān)于前端html換膚功能的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)前端html換膚內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
