在html网页中,当页面的布局不一样时,body的高度是不同的,body高度有几种获取方法,各有不同。下面小编举例讲解JS获取body的高度。
工具/原料
html+css
代码编辑器:ZendStudio12.5.1
方法/步骤
1、新建一个html文件,命名为test.html,用于讲解JS获取body的高度。
2、在test.html文件中,使用button标签创建一个按钮,给button绑定onclick点击事件,当按钮被点击时,执行getheight()函数。
3、在js标签内,创建一个getheight()函数,在函数内,通过clientHei壹执慵驾ght属性获得网页可见区域高,包括padding但不包括border、水平滚动条、margin的元素的高度。
4、在getheight()函数内,通过offsetHeight属性获得网页可见区域高猾诮沓靥(包括边线的高),包括padding、border、水平滚动条,但不包括margin的元素的高度。
5、在getheight()函数内,通过scrollHeight属性获得网页正文全文高,包括当前不可见部分的元素的高度。
6、在getheight()函数内,通过scrollTop属性获得网页被卷去的高,即滚动条向下滚动的距离。
7、在getheight()函数内,使用write()方法输出结果。在浏览器打开test.html文件,点击按钮,查看输出的结果。