Question

题目

JS如何设置/获取盒模型对应的宽和高？

Answer 1

解答

【解析】

问题简答

1) dom.style.width/height【只能取到内联元素】
2) dom.currentStyle.width/height【只有IE支持】
3) document.getComputedStyle(dom,null).width/height
4) dom.getBoundingClientRect().width/height
5) dom.offsetWidth/offsetHeight【常用】

知识解析

1、dom.style.width/height

通过dom节点的style样式获取，只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到.box{...}

----------------------------

let targetDom = document.querySelector('.box');
let width = targetDom.style.width;
let height = targetDom.style.height;

console.log("width",width)
console.log("height",height)

使用类设置宽高时

获取的宽高为空

<style>
box {
width: 100px;
height: 100px;
border: 10px solid #CC9966;
padding: 30px ;
margin: 40px;
background: #66FFFF ;
box-sizing: border- box;
}
</style>
</head>
<body>
<div class="box"></div> 
</body>

> let targetDom = document . querySelector(' .box');
let width = targetDom. style . width;
let height = targetDom. sty1e. height;
console .1og( "width" , width)
console.1og("height" ,height)
width
height

在行内设置宽高时

获取的是行内设置的宽高

<body>
<div class="box" style=" width: 100px; height: 100px; "></div>
</body>

> let targetDom = document . querySelector(' .box');
let width = targetDom. sty1e .width;
let height = targetDom. style. height;
console. 1og( "width" , width)
console. 1og("height" ,height)
width 100px
height 108px

element.style.xxx 这种只能取得内嵌样式的属性，获取样式能读能写

2、dom.currentStyle.width/height

取到的是最终渲染后的宽和高，如果有设置宽高，则不论哪种盒模型获取到的都是设置的宽高,只有IE兼容

.box {...同上}
----------------------------

let targetDom = document.querySelector('.box');
let width = targetDom.currentStyle.width;
let height = targetDom.currentStyle.height;

element.currentStyle[xxx] 可以取得内部和外部样式，但是只兼容ie浏览器，获取的样式只能读

3、document.getComputedStyle(dom,null).width/height

取到的是最终渲染后的宽和高，如果有设置宽高，则不论哪种盒模型获取到的都是设置的宽高，和currentStyle相同，但是兼容性更好，IE9 以上支持。

getComputedStyle()方法,

1.第一个参数：取得计算样式的元素；
2.第二个参数：一个伪元素字符串（例如“:after”），如果不需要伪元素信息，默认为null；

.box {...同上}
----------------------------

let targetDom = document.querySelector('.box');
let width = window.getComputedStyle(targetDom).width
let height = window.getComputedStyle(targetDom).height

console.log("width",width)
console.log("height",height)

〉let targetDom = document . querySelector('.box');
let width = window . getComputedstyle (targetDom) . width
let height = window. getComputedStyle(targetDom) . height
console. log( "width" , width)
console .1og("height" , height)
width 100px
height 108px

4、dom.getBoundingClientRect().width/height

得到渲染后的宽和高，大多浏览器支持。IE9以上支持。

.box {...同上}
----------------------------
let targetDom = document.querySelector('.box');
let width = targetDom.getBoundingClientRect().width;
let height = targetDom.getBoundingClientRect().height
console.log('width',width)
console.log('height',height)

标准模型，宽高设置为100的结果，额外包括了padding和border的值；

> let targetDom = document . querySelector(' .box');
let width = targetDom. getBoundingClientRect() . width;
let height = targetDom. getBoundingClientRect() . height
console .1og( 'width' ,width)
console .1og( 'height' ,height)
width 180
height 180

IE模型，宽高设置为100的结果；

> let targetDom = document . querySelector(' .box');
let width = targetDom. getBoundingClientRect() . width;
let height = targetDom. getBoundingClientRect() . height
console.1og( 'width' , width)
console.1og( 'height' ,height)
width 100
height 100

5、dom.offsetWidth/offsetHeight（常用）

包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。.box {...同上}

----------------------------
let targetDom = document.querySelector('.box');
let width = targetDom.offsetWidth;
let height = targetDom.offsetHeight;
console.log('width',width)
console.log('height',height)

标准模型，宽高设置为100的结果；

> let targetDom = document . querySelector(' .box');
let width = targetDom. offsetWidth;
let height = targetDom. offsetHeight;
console.1og( 'width' ,width)
console.1og('height ' ,height)
width 180
height 180

IE模型，宽高设置为100的结果；

> let targetDom = document . querySelector('.box');
let width = targetDom. offsetWidth;
let height = targetDom. offsetHeight;
console.1og( 'width' ,width)
console .1og('height' ,height)
width 100
height 100

点赞
收藏
分享
文章链接