JS獲取盒模型對應的寬高

2022-05-06 02:54:08 字數 677 閱讀 3850

## 獲取內聯樣式寬高

只能獲取內聯設定的樣式,在style或者.css檔案中設定的無法獲取

1 let div = document.queryselect('.test');

2 let width =div.style.width

3 let height = div.style.height

## currentstyle和getcomputedstyle獲取所有樣式

兩者只能獲採樣式,不能設定樣式

let div = document.queryselect('.test');

let width;

if(div.currentstyle)

else

針對獲取任意樣式,可做相容性處理方法:

1

function

getstyle(element, attr) else

7 }

至於 getboundingclientrect()是獲取相對於視窗位置的集合, 可對應獲取寬高,大小, 位置。

1 let div = document.queryselector('.test');

2 let rectobject = div.getboundingclientrect();

js獲取盒子模型的高寬

dom.style.width height 只能獲取到內聯樣式的屬性值,外部樣式 內部樣式的屬性值是獲取不到的。dom.currentstyle.width height 只有ie支援 window.getcomputedstyle dom width height 通用性好 dom.getbou...

JS設定和獲取盒模型的寬和高

在這個例子中給box1使用設定樣式,給box2使用內聯樣式設定寬高。所以在使用 console.log document.getelementbyid style.width height 只能返回box2的寬度和高度。盒子一盒子二 只可以獲取box2的寬高width 300px height 18...

js怎麼獲取元素的寬高

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