獲取元素寬高

2021-09-26 05:12:15 字數 1154 閱讀 8903

獲取元素寬高值

1.內聯樣式. element.style讀取的只是元素內聯樣式,即寫在元素的 style 屬性上的樣式,支援讀寫.

var elebox = document.getelementbyid('eleid');

var h = elebox.style.height;

外聯樣式、巢狀樣式無法通過上述方法直接獲取.

2.getcomputedstyle (chrome/ff)和currentstyle(ie)

var style = window.getcomputedstyle ? window.getcomputedstyle(elebox ,null) : null || elebox.currentstyle;

var h = style.height;

getcomputedstyle 讀取的樣式是最終樣式,包括了內聯樣式嵌入樣式外部樣式。唯讀不能寫.

引數2不需要偽元素資訊時,填null.

相同點

以上兩種方法返回的都是 cssstyledeclaration 物件,返回的物件的鍵名是css的駝峰式寫法.

3.cssrules(chrome/ff)或rules(ie)

var sheet = document.stylesheets[0];

var rule = (sheet.cssrules || sheet.rules)[0];

var h = rule.style.height;

最新的chrome都可以使用.

document.stylesheets 的返回物件是乙個 stylesheetlist ,是 stylesheet 物件的有序集合.

//獲取元素的任意 css 屬性值。

function getstyle(element, attr) else

}

4.clientheight、scrollheight、offsetheight

通過上述三個屬性獲取數值,但是受其它引數影響.

獲取元素高寬

element.clientwidth屬性表示元素的內部寬度,以畫素計。該屬性包括內邊距,但不包括垂直滾動條 如果有 邊框和外邊距 element.getboundingclientrect width有內邊距和邊框,無外邊距 element.style.width 只能去內聯樣式的寬window....

js怎麼獲取元素的寬高

第一種情況就是寬高都寫在 樣式表裡,就比如 div1。這中情況通過 div1.style.width拿不到寬度,而通過 div1.offsetwidth 才可以獲取到寬度。第二種情況就是寬和高是寫在 行內中,比如style width 120px 這中情況通過上述2個方法都能拿到寬度。小結,因為id...

js獲取元素實際精確寬高

解決方法1 window.getcomputedstyle 使用方法 window.getcomputedstyle element 這個方法是js裡提供元素屬性最全的方法,裡面包含幾百個屬性,我們把它在控制台列印出來console.log window.getcomputedstyle docum...