杰晶网络

前端html换肤功能的实现代码
网页制作 2024/11/23 佚名
3 2

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是背景颜色的默认值，写成这样就意味着还原它本来的样子，那就是透明了。

总结

标签：
前端html换肤,html换肤
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“前端html换肤功能的实现代码”
暂无“前端html换肤功能的实现代码”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/23

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网