JavaScript之css操做總結

     用js獲取、設置元素的樣式是前端常常須要用到的，這裏總結一些經常使用到的辦法。

    1. 用js修改元素的class。

    class 屬性是在標籤上引用樣式表的方法之一，它的值是一個樣式表的選擇符，若是改變了 class 屬性的值，標籤所引用的樣式表也就更換了。

element.className;//能夠獲取元素的class。
element.className='';//能夠設置元素的class。

    2. 用js直接設置、獲取元素的內聯樣式。

        ①  對於沒有中劃線的css屬性通常直接使用style.屬性名。如obj.style.width， obj.style.left， obj.style.position 獲取或設置元素對應的樣式。

        ② 對於含有中劃線的css屬性，將每一箇中劃線去掉並將每一箇中劃線後的第一個字符換成大寫。 如： obj.style.marginTop，obj.style.borderLeftWidth，obj.style.zIndex 獲取或設置元素對應的樣式。

        ③ js操做css float屬性的特殊寫法 。 由於float是Javascript的保留字， 因此不能使用obj.style.float來設置或獲取值， 其正確的使用方法是爲：IE:obj.style.styleFloat，其餘瀏覽器Mozilla(gecko)，ff等用styleFloat:obj.style.cssFloat。

        ④ 一次操做元素的多個css屬性用cssText。如：

obj.style.cssText;//獲取元素全部的內聯樣式
obj.style.cssText='margin-left: 1px; position: relative; left: 10px;';//一次設置多個css屬性

    3. 內部樣式和外部樣式設置獲取。

    元素的樣式咱們通常不會使用行內樣式來設置，而是經過link外部樣式設置。那麼能夠用下面的方式來獲取元素的樣式：

var getStyle=function(obj,styleName) {
	if (obj.currentStyle) {
		// ie
		getStyle=function(obj,styleName){
           return obj.currentStyle[styleName];
        }
        return obj.currentStyle[styleName];
	} else {
		getStyle=function(obj,styleName){
           return getComputedStyle(obj, null)[styleName];
        }
        return getComputedStyle(obj, null)[styleName];
	}
}

    上面的方法不但能夠獲取非內聯樣式，也能夠獲取內聯樣式。可是不能獲取符合樣式如padding屬性值，只能獲取單同樣式如padding-left等。