原生js获取元素宽高

缦胡缨

于 2023-03-03 16:13:50 发布

阅读量449

点赞数 1

分类专栏：个人记录文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/dengdadanb/article/details/129317230

版权

个人记录专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<div id="aa" style="width:100px;height:100px;border:1px solid #333;"></div>

var aa = document.getElementById("aa");
aa.offsetWidth==102;   //为元素的实际宽度，包括边线及内边距的宽
aa.offsetHeight==102   //为元素的实际高度，包括边线及内边距的高
aa.scrollWidth==100   //为实际内容的宽度，不包括滚动条和边框行元素该值为0
aa.scrollHeight==100  //为实际内容的高度不包括滚动条和边框，行元素该值为0
aa.clientWidth ==100  //可见区域的宽度，不包括滚动条和边框
aa.clientHeight == 100  //可见区域的高度，不包括滚动条和边框
var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;//滚动条据文档顶部高度
var scrollLeft=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft;//横向滚动条滚动距离
window.screen.height          // 屏幕分辨率的高
window.screen.width            // 屏幕分辨率的宽
var availHeight=window.screen.availHeight  //屏幕可用工作区域高度
var availWidth=window.screen.availWidth   //屏幕可用工作区域宽度
var borderTop = aa.clientTop==1          //获取对象的上边框宽度
var borderLeft = aa.clientLeft==1        //获取对象的左边框宽度