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

html-css021

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

系统原来的更换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样式表了!由于网站别的页面的样式表链接信息都是这样写的,所以每个页面加载时都是会应用最新更新的样式表的,这样子,网站无刷新的全局更新样式表就实现了!!

希望我的回答可以帮到您哦

在确保css修改无误后,刷新页面,如果还是没有效果,估计就是浏览器缓存的问题了,可以关闭所以的浏览器,必须是所有的,然后清理缓存,再然后打开那个页面看效果,还有就是刷新页面时最好使用ctrl+F5来刷新页面,这个是强制刷新!

方法如下:

CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

样式规则是可应用于网页中元素,如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中,外部样式单保存在独立的文档中,网页通过一个特殊标签链接外部样式单。

名称CSS中的"层叠(cascading)"表示样式单规则应用于HTML文档元素的方式。具体地说,CSS样式单中的样式形成一个层次结构,更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果。