实现页面无刷新的更换CSS样式的方法

发布时间:2020-05-21编辑:脚本学堂
本文讲了在静态页面中如何实现无刷新就可更换css样式的方法,如果你想用这种方法,就参考一下本文吧。

    在静态HTM页面中实现无刷新的更换css样式,是不是省掉很多步骤,提高了效率呢?
    更换css模板时都要重新刷新一下页面才能生效,这个功能很是浪费时间,大多数的功能都用AJAX无刷新的实现了,更换css样式表难道不可以实现吗?于是好好收集了一些资料,通过整理总结发现,实现这个功能并不是很可怕的一件事,只要动动脑筋小小的变动以下,就可以实现不用刷新页面来更换css样式模板,这样还是比较满意的。下面把这些总结给大家分享一下吧:

    对于一个大的网站来说了,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样式表了!

    因为网站别的页面的样式表链接信息都是这样写的,所以每个页面加载时就会使用最新更新的样式表,这样子,网站无刷新的全局更新样式表就实现了!!
    大家试试看,是不是很有成就感? 呵呵......