js向页面中添加样式

在页面中引用样式只有三种方式:

1.通过link引用外链形式

 var styles = document.createElement('link')

styles.rel = 'styleSheet'

styles.type = 'text/css'

styles.href = 'http://xxoo.com/c.css'

document.getElementsByTagName('head')[0].appendChild(styles)

这种方式主要是用与样式比较多的情况,长篇大论的时候

2.通过style标签来添加

IE和FF标准浏览器设置样式不一样

 var styles = document.createElement('style')

styles.id = 'id'

style.type = 'text/css'

if(styles.styleSheet){

　　styles.styleSheet.cssText = '#div{color:#fff}'//IE

}else{

　　styles.appendChild(document.createTextNode('#div{color:#fff}'))//for FF

}

document.getElementsByTagName('head')[0].appendChild(styles)
//PS:FF下面获取style中的内容可以通过:document.styleSheet[0].cssRules[0].cssText

这种方式适用于多个元素变换样式但又不至于太多

 

3.修改单条样式

div.style.cssText += ';display:block;width:100px;'

在原有的基础上面添加所以用'+=',不然会覆盖原有的样式,

为什么前面有个分号,是因为IE浏览器中会将样式最后面的分号省略了,别的浏览器会有两个分号,浏览器能够识别