JS注入CSS到页面

首先是IE下的注入。

可以用link的方式，这样其实最简单。

只要javascript来创建一个link标签：

var link = document.createElement('link');
document.body.appendChile(link);
link .setAttribute('rel','stylesheet');
link .setAttribute('href','c:/xxx/xxx/xxx.css');
link .setAttribute('type','text/css');

只要把href指向css文件在本地的位置可以了。

（当时想到过用创建style标签，然后把css通过innerHTML写进去，但是这样做在IE下是会报错的，逐用上面的这种方法。）

css已经注入到了IE里面，但是IE浏览器向来问题多，!important的支持很乱，有些div或者font的style属性始终会继承原页面的，导致我们自己创建的div在不同的页面上也不规则，为了兼容所有的页面，不得不把我们自己创建的element使用自定义标签。

特别是有些网页来不来的就是：

div{
	line-height:1.5em!important;
}
font{
	font-size:9pt!important;
}

别人都这样定义了我们最好用自己的标签去和别人的区别，毕竟我们是注入到别人的网页里，不改动别人原网页的元素样式是肯定要先保证的，但也不能委屈了我们的自己创建的元素。

在IE下使用自定义标签必须添加namespace，不然IE是不忍。

用JS代码添加namespace：

document.namespaces.add('ns','http://xxx.xx.com');

ns就是添加的namespace，执行了这句以后，你再看原页面，就会发现html标签的属性多了一句：

 xmlns:ns = "http://xxx.xx.com"

其实要的就是这个效果。

有了ns就可以定义自己的标签了。

你可以定义

<ns:panel></ns:panel>
<ns:text></ns:text>

然后在css里面定义这些标签的样式就要这样写：

ns/:panel{
	color:#f00!important;
	line-height:1em!important;
}

(加!important是未了避免继承了原页面的color和line-height)

现在创建的element就可以自由的使用自己定义的标签，而不会受到原页面太多的影响了。

在firefox下，注入css可以和IE一样创建link去注入，但是href不能用操作系统下的地址格式，要使用类似URL那种格式。

如果在css文件在电脑中的位置是c:/css/mian.css，那就要写成

link .setAttribute('href','file:///c:/css/main.css');

这样firefox才能找到css文件。

但是除了使用link，在firefox里还可以通过创建style标签来注入css。

var st= document.createElement('style');
document.body.appendChile(st);
st.innerHTML = 'div{.....}................';

通过赋值st的innerHTML来注入css到页面中。