伏龙阁资源网

前端html换肤功能的实现代码
站长资源 2024/11/22 佚名
2 0

50行代码换5种肤色，包含透明

先把代码奉上，自取自用。直接创建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 ” 命名的话，等下可以少写一些代码。

前端html换肤功能的实现代码

这个红色的大盒子就是#box,我给它添加了一个默认颜色，如果不加就是透明。
我给每个盒子都添加了边框，容易区分块儿与块儿

前端html换肤功能的实现代码

第一个跟第四个是有区别的，区别在于第一个颜色是透明，而第二个颜色是红色—跟底色相同。

<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

前端html换肤功能的实现代码

是倒数第一个——红色的小方块

给了box 一个点击事件(onclick)，function(){}是执行的函数，

当box1被onclick的时候，box就function(){}

这样说就很容易理解了，那我们来看看function(){}里面都有什么

前端html换肤功能的实现代码
好简单啊，就这么一句。
这句话的意思就是让box的背景颜色变为红色(red);

style：风格，样式； backgroundColor：是背景颜色； (在JS中，“ - ”
一般不能正常使用，所以被替换成了下一个单词的首字母大写，也就是：
background-color ==> backgroundColor);

最后的：

box.style.backgroundColor = 'transparent';

中的transparent是背景颜色的默认值，写成这样就意味着还原它本来的样子，那就是透明了。

总结

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接