用js獲取、設置元素的樣式是前端常常須要用到的,這裏總結一些經常使用到的辦法。javascript
class 屬性是在標籤上引用樣式表的方法之一,它的值是一個樣式表的選擇符,若是改變了 class 屬性的值,標籤所引用的樣式表也就更換了。css
element.className;//能夠獲取元素的class。 element.className='';//能夠設置元素的class。
① 對於沒有中劃線的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屬性
元素的樣式咱們通常不會使用行內樣式來設置,而是經過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