2021-07-11【技术】js获取各种高度的方法

JavaScript027

2021-07-11【技术】js获取各种高度的方法,第1张

//获取盒子的内容高度，内容高度也可用用box.clientHeight获取，内容高度不包括边框和外边距和滚动条

var box = document.getElementById("box")

var contentHeight = window.getComputedStyle(box).height //输出 '60px'

//js获取移动端屏幕高度和宽度等设备尺寸，兼容性比较好的方法

document.documentElement.clientWidth

document.documentElement.clientHeight

此外，还可以使用元素的点击事件来获取元素高度等内容。

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。

2、在index.html中的<script>标签，输入jquery代码：

$('body').append('height: ' + $(document).height() + '<br/>')

$('body').append('width: ' + $(document).width())

3、浏览器运行index.html页面，此时会打印出界面最大可以滚动的文档宽度和文档高度。