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

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

var box = documentgetElementById("box")

var contentHeight = windowgetComputedStyle(box)height //输出 '60px'

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

documentdocumentElementclientWidth;

documentdocumentElementclientHeight;

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

//js部分

$(document)ready(function() {

$("#button")click(function() {

alert("高："+$(document)height()+" 宽："+$(document)width());

});

});<!-- html 部分 -->

<button id="button">点击显示</button>

你真确定不好使？检查一下jquery路径吧。

jquery:

高度：$(window)height()

宽度：$(window)width();

浮动定位：$(option)css({top:(($(window)height()-$(option)height())/2)+'px'})

option 为你的浮动框识别class或识别id

Javascript:

网页可见区域宽：

documentbodyclientWidth

网页可见区域高：

documentbodyclientHeight

网页可见区域宽：

documentbodyoffsetWidth

(包括边线的宽)

网页可见区域高：

documentbodyoffsetHeight

(包括边线的高)

网页正文全文宽：

documentbodyscrollWidth

网页正文全文高：

documentbodyscrollHeight

网页被卷去的高：

documentbodyscrollTop

网页被卷去的左：

documentbodyscrollLeft

网页正文部分上：

windowscreenTop

网页正文部分左：

windowscreenLeft

屏幕分辨率的高：

windowscreenheight

屏幕分辨率的宽：

windowscreenwidth

屏幕可用工作区高度：

windowscreenavailHeight

屏幕可用工作区宽度：

windowscreenavailWidth

JQuery:

$(document)ready(function(){

alert($(window)height());

//浏览器当前窗口可视区域高度

alert($(document)height());

//浏览器当前窗口文档的高度

alert($(documentbody)height());//浏览器当前窗口文档body的高度

alert($(documentbody)outerHeight(true));//浏览器当前窗口文档body的总高度

包括border

padding

margin

alert($(window)width());

//浏览器当前窗口可视区域宽度

alert($(document)width());//浏览器当前窗口文档对象宽度

alert($(documentbody)width());//浏览器当前窗口文档body的宽度

alert($(documentbody)outerWidth(true));//浏览器当前窗口文档body的总宽度

包括border

padding

margin

})

var win_w = $(window)width();//获取宽度

var win_h = $(window)height();//获取高度

如果你想要匹配高度，那么，就是页面刚刚打开其实没有数据，是等页面打开，计算了屏幕高度之后，再根据每条数据的高度计算出条数，再利用ajax的异步传输去读取列表，然后用JS呈现在手机网页中的。

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

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

2、其次在indexhtml中的<script>标签，输入js代码：

documentbodyinnerText = $(window)height();

3、浏览器运行indexhtml页面，此时会通过jquery获取到窗口高度“743”并打印出。

以上就是关于2021-07-11【技术】js获取各种高度的方法全部的内容，包括:2021-07-11【技术】js获取各种高度的方法、javascript获取浏览器视口宽高、JS如何获取浏览器有效宽度和高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！