本文介绍了JS换肤功能的实现方法。分享给大家参考，如下：

首先准备如下的网页：

div id=' container ' div id=' header ' H3要征服世界，我们必须先解决这些问题/H3/div div id=' nav ' input type=' button ' id=' blue ' class=' blue ' value=' blue theme ' onclick=' changeSyle(' blue ')；/input type=' button ' id=' green ' class=' green ' value=' green theme ' onclick=' changeSyle '(' green ')；'//divdiv id='content' h3 I .触手可及的远大抱负/h3 p除了统治世界之外，无人驾驶可能可以媲美历史上所有的雄心壮志。万亿美元的全球汽车市场只是无人驾驶的首要目标，无人驾驶的长期目标是反向控制以汽车为中心的一系列生活和工作。/p p pImagine利用无人驾驶汽车作为超级终端，连接用户沿着行驶路线和目的地的所有出行、娱乐、点餐、住宿、购物等消费，甚至在判断用户需要租房时提供位置介绍、房产、市场、推荐、点评和价值分析。只要你在舰桥屏幕上对小秘书说一声“OK”，就会有一个带着笑脸的电商服务。如此巨大的商业想象空间，是任何企业都无法抗拒的。/pp无人驾驶的伟大之处在于，它改变的远不止汽车制造和出租车服务行业，而是创造了以无人驾驶汽车为中心的新经济和前所未有的生活方式和社会观念。中国工程院院士李德意希望智能汽车在2015年成为中国智能制造的第一张名片，这是学术界对产业的洞察。在无限前景的召唤下，世界级的IT和汽车巨头几乎涌向无人驾驶市场。谷歌和百度已经独立驾驶多年，苹果造车的传闻随时可能跃上头条。马斯克当然不会错过特斯拉打造超级无人驾驶汽车的机会，宝马、奔驰、大众、奥迪、沃尔沃、本田、比亚迪等中外品牌也纷纷投资。前不久，知名数据专家吴干沙禁不住诱惑，离开英特尔投身智能驾驶。/p/divdiv id='页脚'版权所有？2015-2016，Joshua，版权所有/div/div然后为网站准备两个css样式文件blue.css和green.css文件：

blue.css

车身{ margin: 0pxpadding: 0px} # header { padding: 10px背景-color : sky blue；color:黑色；font-family : arial；文本对齐：中心；font-weight:粗体；} H3 { font-size :20 px；宽度width:800pxmargin: 0 auto} #内容{ width : 90%；margin: 0 autofont-size : 12px；padding: 10px背景色： cadet blue；线高：200%；text-indent :2 em；} # nav { text-align : center；margin: 0 autopadding: 10px 0px背景-color : sky blue；} #页脚{ position: relativebottom: 20px边距-top : 30px；背景-颜色：灰色；文本对齐：中心；}输入{ font-size : 12px；border-radius : 5px；背景-color : sky blue；} input . blue { background-color : sky blue；} input . green { background-color : green yellow；}输入# blue { background-color : sky blue；}green.css:

正文，html { margin : 0pxpadding : 0px h8 : 100% } #集装箱{身高： 100%；相对位置：} # header { padding: 10px背景-颜色：绿黄色；float:left宽度： 20%;高度：100%;文本对齐：中心；盒子尺寸：边框盒子；} #内容{ font-size : 12pxpadding: 10px线高： 180%;宽度： 80%;高度： 100%;文本缩进： 2em背景-颜色：石板灰色；盒子尺寸：边框盒子；}.导航{位置：绝对值；top: 50px宽度： 150像素；} #页脚{ position : relative to p : 20px边距-top : 30px；背景-颜色：灰色；文本对齐：中心；}输入{边框半径： 5px}输入。蓝色{底色：天蓝色；}输入。绿色{底色：绿黄色；}然后在网页开头引入钢性铸铁文件

链接rel='样式表href='css/green.css' rel='外部nofollow' id='cssfile'/然后用射流研究…实现换肤：

函数changeSyle(name){ CSS=document。getelementbyid(' CSS文件')；css.href=name ' .CSS '；document.styleSheets[0].href=name ' .CSS '；控制台。日志(CSS。href)；控制台。日志(' name=' name ')；console.log(名称);}最后定义两个按钮调用射流研究…换行

输入类型=' button ' id=' blue ' class=' blue ' value='蓝色主题onclick='changeSyle '(蓝色');/input type=' button ' id=' green ' class=' green ' value='绿色主题onclick='changeSyle '(绿色);'/最终效果如下：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript操作DOM技巧总结》 、 《JavaScript页面元素操作技巧总结》 、 《JavaScript事件相关操作与技巧大全》 、 《JavaScript查找算法技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript错误与调试技巧总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。