JavaScript之css操做總結

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

    1. 用js修改元素的class。

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

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 獲取或設置元素對應的樣式。java

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

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

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

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

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

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等。ip

相關文章
相關標籤/搜索