关闭

无刷新更换页面样式

标签: firefox浏览器cssurlie
1820人阅读 评论(0) 收藏 举报
分类:

本文只是实现无刷新更改页面样式的一个例子,具体现实中如有问题,可以查询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来实现。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:149486次
    • 积分:1510
    • 等级:
    • 排名:千里之外
    • 原创:33篇
    • 转载:1篇
    • 译文:0篇
    • 评论:38条
    最新评论