开发学院网页设计 DivCss javascript+css无刷新实现页面样式的更换阅读

javascript+css无刷新实现页面样式的更换

　2010-10-28 08:08:10　来源：WEB开发网　　　

核心提示：JavaScript CSS Style属性对照表http://tech.cncms.com/sheji/divcss/48128.html 在ASP.NET自带功能中，如果要更换页面的主题，javascript+css无刷新实现页面样式的更换，只能是放在Page_PreInit事件里，而这个事件一般都要经过刷新才会执

JavaScript CSS Style属性对照表

http://tech.cncms.com/sheji/divcss/48128.html

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

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

首先建立一个html文件，代码如下：

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

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

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

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

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

拓展：

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

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

JavaScript CSS和简单的事件