使用JS实现网页动态换肤

标签: js 网页 | 发表时间:2011-07-19 13:38 | 作者:Crazy Ma 天朝小民
出处:http://www.cnblogs.com/

现在很多网站都有换肤功能,通过切换风格可以让同一个网站带给用户不一样的体验,那么如何动态切换风格呢?
我们现在的网站都是结构,表现,行为分离,所以我们可以通过切换CSS样式来更改页面风格。
如果你的网站使用了jQuery,那么我们可以定义一个jQuery扩展方法,用来动态切换CSS样式
代码如下:

jQuery.extend({
    //根据ID查找样式,如果存在则删除这个样式
    removeStyleSheet: function(id) {
        var existing = document.getElementById(id);
        if (existing) {
            existing.parentNode.removeChild(existing);
        }
    }, 
    //风格切换  id:样式标识ID   url:样式路径
    swapStyleSheet: function(id, url) {
        var doc = document;
        this.removeStyleSheet(id);
        var ss = doc.createElement("link");
        ss.setAttribute("rel", "stylesheet");
        ss.setAttribute("type", "text/css");
        ss.setAttribute("id", id);
        ss.setAttribute("href", url);
        doc.getElementsByTagName("head")[0].appendChild(ss);
    }
});

然后我们就可以在调用这个方法来实现换肤功能:

$.swapStyleSheet("DefaultStyle", "Styles/DefaultStyle.css");

如果你的网站样式比较固定 那么可以使用以下的JS方法:

function C(id) {
    return !id ? null : document.getElementById(id);
}
// 风格切换  cssname css文件名
function themestyle(cssname) {
    if (!C('themestyle')) {
        css = document.createElement('link');
        css.id = 'themestyle',
        css.type = 'text/css';
        css.rel = 'stylesheet';
        var headNode = document.getElementsByTagName("head")[0];
        headNode.appendChild(css);
    }
    // 引用的CSS文件的地址
    C('themestyle').href = 'Styles/' + cssname + '.css';
}

然后调用以上方法即可:themestyle("DefaultStyle");

作者: Crazy Ma 发表于 2011-07-19 13:38 原文链接

评论: 3 查看评论 发表评论


最新新闻:
· AMD物色新CEO进展缓慢:4名候选人拒绝邀请(2011-07-19 20:40)
· Android手机可蓝牙遥控R/C汽车(2011-07-19 20:38)
· 34%iPhone用户误以为iPhone4是4G手机(2011-07-19 20:37)
· 搜狗浏览器3.0正式版发布 更新提醒倍受追捧(2011-07-19 20:30)
· 国内版的ifttt“如果说”明天上线(2011-07-19 20:29)

编辑推荐:HTML5基础,第2部分:组织页面的输入

网站导航:博客园首页  我的园子  新闻  闪存  小组  博问  知识库

相关 [js 网页] 推荐:

使用JS实现网页动态换肤

- 天朝小民 - 博客园-首页原创精华区
现在很多网站都有换肤功能,通过切换风格可以让同一个网站带给用户不一样的体验,那么如何动态切换风格呢. 我们现在的网站都是结构,表现,行为分离,所以我们可以通过切换CSS样式来更改页面风格. 如果你的网站使用了jQuery,那么我们可以定义一个jQuery扩展方法,用来动态切换CSS样式. //根据ID查找样式,如果存在则删除这个样式.

简单***的实现,利用js解析把web网页转换成自己的网页,加快开发

- - ITeye博客
利用开源js引擎rhino+jsoup进行web裁制,使用javascript来解析页面. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

抓取Js动态生成数据且以滚动页面方式分页的网页

- - 开源软件 - ITeye博客
当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢. 如类似今日头条这样的网站: http://toutiao.com/. 我们可以使用 Selenium来搞定这件事情. Selenium的设计目的虽然是用于Web应用程序的自动化测试,但是却非常适合用来做数据抓取,可以非常简单地绕过网站的反爬虫限制,因为Selenium直接运行在浏览器中,就像真正的用户在操作一样.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.

來源請求.js

- 红烧鲤鱼 - Blog: timdream
很早以前就想講了,但講了大概又會被戰. 相較於英文維基百科,中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的,而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識,而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識,所以有自覺的百科編輯者反而是少數;中文維基只好長成現在這個樣子了.

Js删除节点

- - JavaScript - Web前端 - ITeye博客
 方式一:传this参数调用方法:.  方式二:js方法中通过选择器获取节点:. //此处删除的是a节点 }. 方式三:通过jQuery方式获取节点:(尚未测试,有待测试. 此处a标签传this到js中,js通过this(即a节点)取parent(即p节点). (1)p.remove();可直接删除整个p节点.

JS游戏引擎列表

- sku - 酷壳 - CoolShell.cn
这里有一个网址收集了关于JS游戏引擎开发库的一个列表,转过来. 关于使用JS和HTML5做的一些小游戏,可参见《HTML5 小游戏展示》. Name Latest Release License Type Notes The Render Engine 1.5.3 MIT 跨浏览器; 大规模 API; 开源. 2 gameQuery 0.5.1 CC BY-SA 2.5 和 jQuery 一起使用 gTile 0.0.1 Tile based.

Deck JS: HTML5 幻灯片

- L - LinuxTOY
Deck.js 是一组开源的 JavaScript 类库,方便使用现代的 HTML5/CSS3/JS 技术创建幻灯片. 该软件十分适用于开源项目介绍,交互式的方式比单纯的文字说明更简洁易懂. 不废话了,赶紧前往该项目主页去体验 HTML5 时代的幻灯片吧. 分类: Productivity |. 收藏到 del.icio.us |.

JS三维模型库 Three.js

- Le - 开源中国社区最新软件
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象. 你可以在它的主页上看到许多精采的演示. 不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏) 演示:http://mrdoob.github.com/three.js/.