原生JavaScript实现容易换肤效果代码
发布时间：2022-04-20 09:11:33 所属栏目：语言 来源：互联网
导读：用原生JavaScript如何实现换肤效果？在前端开发中，换肤效果也是比较常遇到需求，例如一些导航网站就有网页换肤功能。而要实现js换肤的原理其实很简答，就是用JS切换到对应的CSS样式表文件就可以实现了。下面是用原生JS现实的简单换肤效果，供大家参考。 原
|
用原生JavaScript如何实现换肤效果？在前端开发中，换肤效果也是比较常遇到需求，例如一些导航网站就有网页换肤功能。而要实现js换肤的原理其实很简答，就是用JS切换到对应的CSS样式表文件就可以实现了。下面是用原生JS现实的简单换肤效果，供大家参考。 原理 通过点击事件，获取点击的的图片的信息，在HTML背景图片的路径改变 css样式 <style> body{ margin:0; padding:0; background:url(img/1.jpg) no-repeat; background-size:100% 100%; } #box{ width:100%; height:130px; background:#999999; JavaScript源码 <script> var oBody=document.getElementById('Body'); var oImg=document.getElementsByTagName('img'); for(var i=0;i<oImg.length;i++) { var oImgA=oImg[i]; oImgA.index=i+1; oImgA.onclick=function(){ //console.log(this); oBody.style.background='url(img/'+this.index+'.jpg) no-repeat'; oBody.style.backgroundSize='100% 100%'; （编辑：常州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
