HTML网页中无刷新的更换CSS样式

系统原来的更换CSS模板是要重新刷新一下儿页面的,我一直都对这个功能很不满意,百分之九十五的功能都用AJAX无刷新的实现了,难道要在这个小小的更换页面CSS模板上给用户添点恶心吗?于是,昨天晚上好好考虑了这个功能上的实现,原来发现其实并不难,小改一下就OK了,现在系统上的模板更换是不用刷新页面来完成的,明显在感觉上比原来好得多了,下面谈谈经验吧:

对于一个多页面的网站来说了,CSS的更换不能只简单的在一个页面中调用更换CSS功能更新这个页面头上链接的CSS地址,因为它不能保证在点击了别的页面后新的样式应该到新打开的页面中去,因此,一定要有一个全局性的变量来记录它,我选用的是SESSION,在用户点击了侧边模板下拉框中的模板时,触发了下拉框的ONCHANGE事件,执行了一段AJAX程序,程序的功能是将用户选中的模板信息发送给服务器,服务器接收新的模板信息后更新表示模板的SESSION值,然后向客户端返回成功信息,客户端则根据返回的成功信息来改变页面样式,注意:我在页面头中写的CSS链接信息是这样子的:

<LINK id=cssLink href="css.aspx" type=text/css rel=stylesheet>

css.aspx是一个ASP.net的页面,它的作用只是单一的根据SESSION中的当前CSS模板信息来转向所应CSS样式表文件!这样子的处是客户端在接收到了服务器端成功更新SESSION的信息后刚不用考虑其它的东西,直接一句:

document.getElementById("cssLink").href=document.getElementById("cssLink").href;

将cssLink的href重新写一下儿,虽然是前后一模一样子的值,但这会激发CSS.ASPX页面重新读一下儿,这样子CSS.ASPX页面就能转到新更新的CSS样式表了!由于网站别的页面的样式表链接信息都是这样写的,所以每个页面加载时都是会应用最新更新的样式表的,这样子,网站无刷新的全局更新样式表就实现了!!

时间: 2024-11-10 01:25:21

HTML网页中无刷新的更换CSS样式的相关文章

如何在静态HTM页面中实现无刷新的更换CSS样式

     在静态HTM页面中实现无刷新的更换CSS样式!     系统原来的更换CSS模板是要重新刷新一下儿页面的,我一直都对这个功能很不满意,百分之九十五的功能都用AJAX无刷新的实现了,难道要在这个小小的更换页面CSS模板上给用户添点恶心吗?于是,昨天晚上好好考虑了这个功能上的实现,原来发现其实并不难,小改一下就OK了,现在系统上的模板更换是不用刷新页面来完成的,明显在感觉上比原来好得多了,下面谈谈经验吧:      对于一个多页面的网站来说了,CSS的更换不能只简单的在一个页面中调用更换C

ASP.NET技巧之巧妙实现无刷新更换CSS样式

将cssLink的href重新写一下儿,虽然是前后一模一样子的值,但这会激发CSS.ASPX页面重新读一下儿,这样子CSS.ASPX页面就能转到新更新的CSS样式表了! 对于一个多页面的网站来说了,CSS的更换不能只简单的在一个页面中调用更换CSS功能更新这个页面头上链接的CSS地址,因为它不能保证在点击了别的页面后新的样式应该到新打开的页面中去,因此,一定要有一个全局性的变量来记录它,我选用的是SESSION,在用户点击了侧边模板下拉框中的模板时,触发了下拉框的ONCHANGE事件,执行了一段

“ASP.NET 2.0 正式版中无刷新页面的开发”中示例代码与Firefox兼容的解决

asp.net|解决|示例|刷新|无刷新|页面 这几天正着手开始写毕业设计,因为发生了一些事情,所以一直拖到现在才开始.其实我准备做一个ASP.NET 2.0并且使用AJAX的Web项目,于是到博客园到处寻着AJAX的文章,恰好翻到了Leon.Zhou的ASP.NET 2.0 正式版中无刷新页面的开发按照代码示例和讲解做了一个页面,确实不错啊.因为俺平时几乎都用Firefox,所以就顺手测试了一下Firefox下的效果,结果发现点了Button之后没有反应--于是打开Javascript控制台,

php正则去除网页中所有的html,js,css,注释的实现方法_php实例

如下所示: $search = array ("'<script[^>]*?>.*?</script>'si", // 去掉 javascript "'<style[^>]*?>.*?</style>'si", // 去掉 css "'<[/!]*?[^<>]*?>'si", // 去掉 HTML 标记 "'<!--[/!]*?[^<>

php正则去除网页中所有的html,js,css,注释的实现方法

如下所示: $search = array ("'<script[^>]*?>.*?</script>'si", // 去掉 javascript "'<style[^>]*?>.*?</style>'si", // 去掉 css "'<[/!]*?[^<>]*?>'si", // 去掉 HTML 标记 "'<!--[/!]*?[^<>

为什么在页面刷新的时候,css样式,也就消失了!

问题描述 为什么在页面刷新的时候,css样式,也就消失了!这是为什么啊,怎么改呢,table,td,th{border:1px#AFD1FFsolid;border-collapse:collapse;}body{font-size:12px;}input,DropDownList,textarea{font-size:12px;border:1px#AFD1FFsolid;background-color:#ffffff} 解决方案 解决方案二:页面是否有输出,比如在cs中有:Response

学习网页中的图片如何应用CSS的滤镜的效果

有时候,我们需要给网页中的图片加一些特殊的效果,比如透明.扭曲.阴影或者翻转等,我们一般都会想到用Photoshop等一些图形软件来处理,其实我们也可以利用CSS(层叠式样表)提供的一些滤镜来处理,这对于不熟悉Photoshop的网友来说,是非常好的一件事. 我们先从较简单的开始,介绍几个没有参数的滤镜. 1.Gray滤镜 Gray滤镜的作用是产生黑白效果 使用方法:<img src=www.ddvip.com" style="filter:gray"> 2.In

ASP.NET 2.0 正式版中无刷新页面的开发(示例代码的补充)

asp.net|示例|刷新|无刷新|页面 原文请见Leon.Zhou的:http://pfzhou.cnblogs.com/archive/2006/03/31/363342.html 下载了示例代码,并转换成VB了,AJAX功能测试成功.但遇到些小问题:Demo1很正常.Demo2按Leon原来的写法testAJAX.aspx.vb中Line 22不成功.所以我直接在IDE环境中,修改button3的OnClientClick属性,见testAJAX.asp的Line 52.测试成功.Demo

.NET 2.0正式版中无刷新页面的开发

刷新|无刷新|页面 在已经发布的 ASP.NET2.0 中,无刷新页面开发相关部分同 beta2 有不少改动.而且在越来越多的 Ajax 开发包被开发出来的情况下, ASP.NET2.0 自带的无刷新页面技术没有被很多人了解,甚至不少人认为该功能有些"鸡肋".但如果我们仅仅是在程序中加入很少部分的 Ajax 特性, Atlas . Ajax.Net 等就显得有些"杀鸡用牛刀"的感觉了.而且,我认为使用 ASP.NET2.0 提供的方法进行开发并不很复杂,相反,使用很