zoukankan      html  css  js  c++  java
  • javascript+css无刷新实现页面样式的更换

    如果要更换页面的主题,只能是放在Page_PreInit事件里,而这个事件一般都要经过刷新才会执行,所以这就导致效率下降,用户体验也会跟着下降。

    下面我将介绍一下关于Javascript+CSS的解决办法:

    首先建立一个html文件,代码如下:

    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2  <html xmlns="http://www.w3.org/1999/xhtml">
    3  <head>
    4 <title>无刷新更改页面样式</title>
    5 <link id="theme" href="red.css" rel="Stylesheet" type="text/css" />
    6  </head>
    7  <body>
    8 <div>这是页面的文字</div>
    9 <input id="btnChangeRedTheme" type="button" value="red" />
    10 <input id="btnChangeBlueTheme" type="button" value="blue" />
    11 </body>
    12 </html>

    接下来就是通过button的单击事件来更改link标签中的href属性了,以下是jQuery代码,用Javascript实现也很简单,由于鄙人热衷于jQuery,所以请大家谅解:)

    1 <script type="text/javascript">
    2 $(document).ready(function(){
    3 $('#btnChangeRedTheme').click(function(event){$('#theme').attr('href','red.css');});
    4 $('#btnChangeBlueTheme').click(function(event){$('#theme').attr('href','blue.css');});
    5 });
    6 </script>

    就这样大功告成了,很简单吧。

    至于blue.css和red.css两个文件怎么写,就发挥您的聪明才智吧!

    拓展:

      如果您的某个主题里面有很多CSS文件的话,您可以将主题里这些文件的名字都取相同的,然后建立各个主题的文件夹,如blue,red…

    要更换主题的话,只要替换掉所有link标签href属性里的文件夹字符串,如href='blue/theme.css',只需将blue替换为red,即href='red/theme.css'。

    http://www.cnblogs.com/mapping/archive/2010/10/27/1863052.html

  • 相关阅读:
    一些flex、AS开源项目
    WEB日志格式
    【6】.net msmq消息队列实例
    .NET Unity IOC框架使用实例
    【5】.net WCF 简单实例
    【3】.net MVC 使用IPrincipal进行Form登录即权限验证
    【转】.net MVC 生命周期
    【转】.NET 4.5 使用async和await关键字调用异步方法
    WCF:如何将net.tcp协议寄宿到IIS
    .net EF框架 MySql实现实例
  • 原文地址:https://www.cnblogs.com/buffer/p/1890178.html
Copyright © 2011-2022 走看看