offsetHeight、offsetWidth

offsetHeight网页可见区域高度，offsetWidth网页可见区域宽度
这两个属性是元素本身的，而不是style属性里面的，可以通过dom元素点的方式获取

offsetHeight由height、padding组成
offsetWidth 由width、padding 组成

实例

<template><div><div class="main" ref="aaa">1111111111111111111111111</div></div>
</template><script>
export default {mounted() {console.log(this.$refs.aaa.offsetHeight,this.$refs.aaa.offsetWidth)},
};
</script><style scoped lang="scss">
.main{width: 50px;padding: 0px 10px;height: auto;background: pink;
}
</style>

从控制台中可以看出：

不设置高度时，可以通过offsetHeight获取实际高度，但是你通过style的height属性是获取不到任何数据（宽度同高度一样）
可见宽度70=50（width）+ 20（padding）

offsetHeight、offsetWidth相关推荐

offsetParent、offsetTop、offsetLeft、offsetHeight、offsetWidth
1.offsetParent:获取第一个定位的父元素,如果所有父元素都没有定位,则返回body: <!DOCTYPE html> <html lang="en"& ...
offsetWidth、offsetHeight、clientHeight、clientWidth、scrollHeight、scrollWidth详细对比
offsetWidth.offsetHeight.clientHeight.clientWidth.scrollHeight.scrollWidth详细对比代码测试 box-sizing:conte ...
clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较
clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border ...
offsetTop、offsetLeft、offsetWidth、offsetHeight、style中的样式
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd> 假设 obj 为某个 H ...
clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight
clientWidth.clientHeight.offsetWidth.offsetHeight以及scrollWidth.scrollHeight是几个困惑了好久的元素属性,趁着有时间整理一下 1 ...
四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异...
转自http://blog.163.com/chudaozhe@126/blog/static/1157323432011626112137928/ 网页可见区域宽:document.body.cli ...
offsetTop、offsetLeft、offsetWidth、offsetHeight
1.假设 obj 为某个 HTML 控件 obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素. obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型, ...
一篇弄懂 offsetWidth、offsetHeight、offsetleft、offsetTop和offsetParent的区别！（1）
快速理解offset之间的区别 1.offsetWidth与offsetHeight 2.offsetParent 3.offsetleft.offsetTop 以下代码均在Chrome浏览器中测试 ...
offsetLeft 、offsetWidth、scrollHeight等的区别
一.offsetLeft/offsetTop offsetLeft:元素最左边离最近的有定位的父级之间的距离,不带单位. offsetTop:元素最上边离最近的有定位的父级之间的距离,不带单位. 上图 ...

offsetHeight、offsetWidth

offsetHeight、offsetWidth

offsetHeight、offsetWidth相关推荐

最新文章

热门文章