動態樣式

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 一概將-改成駝峯式