50行代碼換5種膚色，包含透明
先把代碼奉上，自取自用。直接創(chuàng)建html文件，直接粘貼進去就能用，不能用隨便罵。
<!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基本標簽這塊兒就不說了，先說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 ” 命名的話，等下可以少寫一些代碼。
這個紅色的大盒子就是#box,我給它添加了一個默認顏色，如果不加就是透明。
我給每個盒子都添加了邊框，容易區(qū)分塊兒與塊兒
第一個跟第四個是有區(qū)別的，區(qū)別在于第一個顏色是透明，而第二個顏色是紅色—跟底色相同。
<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：設置盒子寬度； height：設置盒子高度； background-color：設置盒子背景顏色； border：設置盒子邊框
(1px是邊框的粗細程度，#333是16進制顏色，solid是邊框樣式，solid代表實線)； float：是浮動
(盒子底下充滿了水，盒子漂浮起來了；left就是向左邊漂浮，right就是向右邊漂浮); margin：就是外邊距
(盒子不喜歡擠在一起，為了避免擠壓，我們讓它距離上、下、左、右的任何東西都有一定的間隙);
red是紅色；yellow是黃色；blue是藍色；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選擇器，單獨選中每一個盒子，方便理解。如果想選中所有盒子，
var boxs = box.SelectorAll(‘div’);
這樣一句就全部選中了
box1.onclick = function(){
box.style.backgroundColor = 'red';
}
這句話的含義是：
選中你需要操作的box
是倒數(shù)第一個——紅色的小方塊
給了box 一個點擊事件(onclick)，function(){}是執(zhí)行的函數(shù)，
當box1被onclick的時候，box就function(){}
這樣說就很容易理解了，那我們來看看function(){}里面都有什么
好簡單啊，就這么一句。
這句話的意思就是讓box的背景顏色變?yōu)榧t色(red);
style：風格，樣式； backgroundColor：是背景顏色； (在JS中，“ - ”
一般不能正常使用，所以被替換成了下一個單詞的首字母大寫，也就是：
background-color ==> backgroundColor);
最后的：
box.style.backgroundColor = 'transparent';
中的transparent是背景顏色的默認值，寫成這樣就意味著還原它本來的樣子，那就是透明了。
總結
到此這篇關于前端html換膚功能的實現(xiàn)代碼的文章就介紹到這了,更多相關前端html換膚內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
