这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js+CSS 简单实现网页换肤效果的方法, 涉及 JavaScript 响应鼠标事件动态遍历及修改页面元素样式的相关技巧, 需要的朋友可以参考下
本文实例讲述了 js+css 简单实现网页换肤效果。分享给大家供大家参考,具体如下:
这里做了 3 套外观,分别使用不同文件夹下的同名 css 文件,那么怎样实现 js 替换加载呢?
3 个按钮如下:
- <a id="skin1" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('default')">
- 蓝色皮肤
- </a>
- <br/>
- <br/>
- <a id="skin2" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('gray')">
- 灰色皮肤
- </a>
- <br/>
- <br/>
- <a id="skin3" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('unite')">
- 自定义皮肤
- </a>
js 代码:
- // 更换主题
- function changeCss(cssName) {
- if (document.getElementsByTagName_r("link").length > 0) {
- for(var i = 0 ; i < document.getElementsByTagName_r("link").length; i++){
- var ctrlLink = document.getElementsByTagName_r("link")[i];
- var cssOld = ctrlLink.getAttribute("href");
- var cssNew = cssOld.replace("default", cssName);
- cssNew = cssNew.replace("gray", cssName);
- cssNew = cssNew.replace("unite", cssName);
- ctrlLink.setAttribute("href", cssNew);
- }
- }
- }
实现效果:
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0627/267845.html