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基本標(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 ” 命名的話,等下可以少寫一些代碼。
![](/d/20211016/65e3014fd07d77eeb0a9cf865a5e642d.gif)
這個紅色的大盒子就是#box,我給它添加了一個默認(rèn)顏色,如果不加就是透明。
我給每個盒子都添加了邊框,容易區(qū)分塊兒與塊兒
![](/d/20211016/2efa114c3590e31fcebe6688548164d5.gif)
第一個跟第四個是有區(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:設(shè)置盒子寬度; height:設(shè)置盒子高度; background-color:設(shè)置盒子背景顏色; border:設(shè)置盒子邊框
(1px是邊框的粗細(xì)程度,#333是16進制顏色,solid是邊框樣式,solid代表實線); float:是浮動
(盒子底下充滿了水,盒子漂浮起來了;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選擇器,單獨選中每一個盒子,方便理解。如果想選中所有盒子,
var boxs = box.SelectorAll(‘div’);
這樣一句就全部選中了
box1.onclick = function(){
box.style.backgroundColor = 'red';
}
這句話的含義是:
選中你需要操作的box
![](/d/20211016/c5a9f6cc5c47b8b73c756a1e62514bd3.gif)
是倒數(shù)第一個——紅色的小方塊
給了box 一個點擊事件(onclick),function(){}是執(zhí)行的函數(shù),
當(dāng)box1被onclick的時候,box就function(){}
這樣說就很容易理解了,那我們來看看function(){}里面都有什么
![](/d/20211016/1481e924acdfe21098bb91475e694c33.gif)
好簡單啊,就這么一句。
這句話的意思就是讓box的背景顏色變?yōu)榧t色(red);
style:風(fēng)格,樣式; backgroundColor:是背景顏色; (在JS中,“ - ”
一般不能正常使用,所以被替換成了下一個單詞的首字母大寫,也就是:
background-color ==> backgroundColor);
最后的:
box.style.backgroundColor = 'transparent';
中的transparent是背景顏色的默認(rèn)值,寫成這樣就意味著還原它本來的樣子,那就是透明了。
總結(jié)
到此這篇關(guān)于前端html換膚功能的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)前端html換膚內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!