无刷新更换页面样式

本文只是实现无刷新更改页面样式的一个例子,具体现实中如有问题,可以查询MSDN获取帮助.

要改成页面样式,第一步理解样式文件的加载原理,即新加载在后面的同名样式将自动覆盖原来的同名样式，比如说

body{font:size:10px;backgroup:url(../images/aa.img)repeat top center}这个样式的作用是给背景加上一个图片，图片平铺，然而当页面中在这之后加上一个样式body{backgroup-reapt:noreapt;}这样虽然你的页面中有两个同名的样式，但对背景图片的重复会变成不自动平铺了。

要设置成JS无刷新更改页面样式，可以通过增加一个样式文件（跟原页面的样式结构一样，具体内容不一样），来更改原来页面的样式，代码如下:

var links=document.CreateElements("link");

link.type="text/style";

link.href="other.css";

document.getElementsByTagName("head")[0].AppenChild(link);

这样就可以了。

另一种方法:就是在更改页面中某一部分的样式时，直接通过document.CreateElement("Style")元素来实现。

注意：使用document.CreateElement("Style")时，IE中通过StyleSheet.Text来实现CSS内容的书写，FireFox等浏览器通过增加一个TextNode，然后将样式给其InnerHTML来实现。