动态样式

js可以动态的向html页面中添加样式

 动态样式必须添加在head标签当中才能被正确的解析和执行

一 动态添加内部和外部样式

1 添加外部样式

var link=document.createElement("link");

link.type="type/css"

link.rel="stylesheet"

link.href="a.css"

document.head.appendChild(link)

2 添加内部样式(非IE)

var style=document.createElement("style");

style.text="text/css";

style.appendChild(document.createTextNode("body:{background-color:red;}");//直接向style中写内容

document.appendChild(style);

3 添加内部样式(IE)

var style=document.createElement("style");

style.text="text/css";

style.styleSheet.cssText="body:{background-color:red;}";//直接向style中写内容

document.appendChild(style);

4 兼容所有浏览器的写法

var code="body:{background-color:red;}"；

var style=document.createElement("style");

style.text="text/css";

try

{

style.appendChild(document.createTextNode(code);

}

catch(ex)

{

style.styleSheet.cssText=code;

}

二 利用元素的style属性动态添加內联样式

利用元素的style属性操作样式，只能操作元素内部通过style表现的內联样式，不能操作外部样式和内部样式

如果元素通过类或者id引入了样式，元素的style属性也不会对他们进行操作，如果style属性中引入了和外部或者内部样式中相同的特性

那么会覆盖中的那些

如果css中为background-color 到js中就要写成backgroundColor 一律将-改为驼峰式

<div style="width:200px" class＝“wid”></div>

1 odiv.style.width

 获得width属性，同时也可以为其赋值修改width的值

如果在外部活着内部样式表中设置了div的width值，活着wid类中设置的div的width值，那么新写入的值将会把之前的覆盖

因为內联样式的优先级最高

2 odiv.style.length

得到style属性中特性的个数，这里为1

3odiv.style.item（i） odiv.style[i]

获得第i个特性的名称 这里odiv.style[0]为width

4odiv.style.cssText

获得style中的所有内容，这里为width:200px

4 odiv.style.getPropertyValue("width")

获得某一个特性的值，这里为200px

5 odiv.style.removeProperty("width")

将某个特性移除

三 动态修改外部内部样式表

<style>

div.box{width:200px}

.name {length:100px}

</style>

这个介绍的是动态的修改<link>标签或则会<style>标签中的样式表

var a=document.stylesheet;//获取所有link标签和style标签的样式表

var b=a[0];//获取第一个link或者style标签

var c=b.cssRules/var c=b.rules //获取标签内部的css的具体内容

var d＝c[0] //获取第一个样式，这里为div.box{width:200px}

然后就可以获取或者修改属性值

d.style.width=20px; 取得具特的特性值

d.selectortext  对应的是选择器的名称，这里为div.box 可以取值或者修改

d.style.cssText 对应的是选择器中的具体内容，这里为{width:200px}，同样可以取到这个值，也可以对它进行整体的修改

同样 如果css中为background-color 到js中就要写成backgroundColor 一律将-改为驼峰式