js实现换肤

首先准备HTML页面如下:

	<div id="container">
			
		
		<div id="header">
			<h3>无人驾驶要征服世界,得先解决这些问题</h3>
		</div>
		<div id="nav">
		<input type="button" id="blue" class="blue" value="蓝色主题" οnclick="changeSyle('blue');" />
		<input type="button" id="green" class="green" value="绿色主题" οnclick="changeSyle('green');" />
		</div>
		<div id="content">
			<h3>	一、触手可及的伟大野心</h3>
			<p>除了统治世界,无人驾驶大概可以和历史上所有野心匹敌。万亿美金的全球汽车市场也只是无人驾驶的第一个目标,反向控制用户以汽车为中心的一系列生活和工作才是无人驾驶汽车的长远目标。</p>
			<p>想象一下,把无人驾驶汽车作为超级终端连接用户在驾驶沿途和目的地发生的全部旅游、娱乐、订餐、住宿、购物和其它消费,甚至判断用户需要租房购房时把地段介绍、楼盘、行情、推荐、点评、价值分析一并提供。你只要对驾驶台屏幕上的小秘书说一声OK,就有电商堆着笑脸连线服务,这样巨大的商业想象空间是任何一家企业无法抗拒的。
&
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
360导航首页的“换肤”功能可以通过JavaScript来实现。以下是一个简单的实现方式: HTML代码: ``` <div id="skin"> <ul> <li><a href="#" data-skin="skin1">皮肤1</a></li> <li><a href="#" data-skin="skin2">皮肤2</a></li> <li><a href="#" data-skin="skin3">皮肤3</a></li> </ul> </div> ``` CSS代码: ``` /* 皮肤1的样式 */ #skin1 { background-color: #f5f5f5; } /* 皮肤2的样式 */ #skin2 { background-color: #333; color: #fff; } /* 皮肤3的样式 */ #skin3 { background-color: #ff0000; color: #fff; } ``` JavaScript代码: ``` var skin = document.getElementById("skin"); var links = skin.getElementsByTagName("a"); for(var i = 0; i < links.length; i++) { links[i].addEventListener("click", function(e) { e.preventDefault(); var skinName = this.getAttribute("data-skin"); document.body.className = skinName; }); } ``` 上述代码中,我们首先获取了一个id为“skin”的元素以及其中的所有链接元素。然后,我们为所有链接元素添加了一个点击事件监听器。当用户点击一个链接时,我们首先使用preventDefault()方法来阻止默认链接行为,然后获取该链接的data-skin属性值,即皮肤名称。最后,我们将body元素的className属性设置为皮肤名称,从而改变页面的样式。 在CSS中,我们为每种皮肤定义了不同的样式。当用户点击链接时,JavaScript会根据皮肤名称将body元素的className属性设置为相应的皮肤名称,从而切换页面的样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值