javascript获取高度

最新推荐文章于 2021-02-01 04:18:15 发布
最新推荐文章于 2021-02-01 04:18:15 发布
阅读量577 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： javascript function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Fortunatee/article/details/6122748
本文介绍了一个JavaScript函数，该函数用于计算HTML元素的实际总高度，包括内边距、边框、外边距等。它针对不同浏览器环境提供了兼容性处理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

function getTotalHeight(element) {

    if (document.defaultView) {

        h = element.offsetHeight

            + px2Int(getComputedStyle(element, '').getPropertyValue("padding-top"))

            + px2Int(getComputedStyle(element, '').getPropertyValue("padding-bottom"))

            + px2Int(getComputedStyle(element, '').getPropertyValue("border-top-width"))

            + px2Int(getComputedStyle(element, '').getPropertyValue("border-bottom-width"))

            + px2Int(getComputedStyle(element, '').getPropertyValue("margin-top"))

            + px2Int(getComputedStyle(element, '').getPropertyValue("margin-bottom"));

    } else {

        h = element.offsetHeight

            + px2Int(element.currentStyle.paddingTop)

            + px2Int(element.currentStyle.paddingBottom)

            + px2Int(element.currentStyle.borderTopWidth)

            + px2Int(element.currentStyle.borderBottomWidth)

            + px2Int(element.currentStyle.marginTop)

            + px2Int(element.currentStyle.marginBottom);

    }

    return h;

}

Fortunatee
关注
JavaScript获取浏览器高度和宽度值及鼠标定位
chern1992的博客
10-24 1126
JavaScript获取浏览器高度和宽度值及鼠标定位
html中js隐藏div的高度,js如何获取div（ul li）元素的宽度和高度（包括width/height和CSS的宽度和高度）...
weixin_28963665的博客
06-03 1052
某些时候需要知道元素div(或 ul li)的宽度或高度，大多情况下可以用js取元素div的width或height属性获得，但有时候这个方法不一定奏效，把div的宽度或高度定义在CSS样式中，这个方法就取不到，这种情况应该如何取？javascript提供了从CSS中获取元素宽度和高度的方法，由于获取的对象比较复杂，所以单用一个方法不能完成，需要用几个方法才获取到，具体看下面的实例。一、js直接获...
javascript获取页面各种高度
06-26
网页可见区域宽高,网页正文全文宽高,屏幕可用工作区宽高
JavaScript - 获取高度
dicha7140的博客
03-27 103
网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth ...
clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
weixin_38170862的博客
09-19 277
网页可见区域高：document.body.clientHeight 网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop 屏幕分辨率高：window.screen.height clientHeight：包括paddin...
用javascript获取屏幕高度和宽度等信息
老朱的专栏
05-13 391
用javascript获取屏幕高度和宽度等信息 网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域高： document.body.offsetHeight (包括边线的高)网页正文全文宽： document.b...
javascript获取隐藏元素(display:none)的高度和宽度的方法
10-25
然而，当我们尝试获取一个CSS样式为display:none的元素的高度和宽度时，会发现常规的JavaScript方法无法直接获取这些尺寸值，因为display:none的元素没有物理尺寸。为了获得这些隐藏元素的尺寸信息，需要采用一些...
javascript获取设置div的高度和宽度兼容任何浏览器
10-26
这里主要讨论两个属性：`offsetHeight` 和 `offsetWidth`，这两个属性可以分别用来获取元素的总高度和总宽度，包括元素的边框、垂直方向的内边距、水平方向的内边距以及水平滚动条（如果存在）。这两个属性在IE、...
一个JavaScript获取元素当前高度的实例
10-25
本实例将详细讲解如何使用JavaScript获取HTML元素的当前高度，并通过一个具体的代码示例来演示这一过程。 首先，我们需要理解在JavaScript中获取元素高度的几种方法。主要有以下三种： 1. `offsetHeight`：这个...
javascript 获取页面的高度及滚动条的位置的代码
12-11
代码如下: var Viewport={ top : function(){ return window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop; }, height : function(){ return window...
JS获取各种宽度、高度的简单介绍
12-10
有时候项目中会用到用js获取元素位置来定位元素，首先通过图片说明scrollWidth,clientWidth,offsetWidth的关系。 JS获取各种宽度、高度的简单介绍： scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或
JavaScript获取页面宽度高度大全
youthon的专栏
06-30 539
JavaScript获取页面宽度高度大全
webapp开发系列之--教你纯js获取虚拟键盘的高度
weixin_34360651的博客
03-01 1083
2019独角兽企业重金招聘Python工程师标准>>> ...
h5如何动态获取键盘高度_js判断手机端键盘弹出从而调整输入框高度
weixin_39963255的博客
02-01 1778
键盘弹起后 body 会增加 class="openkey"用 openkey 调整表单的高度，让其在上半屏显示完整的表单，避免被遮挡$(function(){w = $(window).height();ht = $('body').scrollTop();$(window).resize(function(){inps(3);})$('input').focus(function(){inps...
如何用 js 获取虚拟键盘高度？- 20170817 前端开发日报
前端开发博客
08-18 515
记得点击文章末尾的“阅读原文”查看哟~下面先一起看下今天的日报摘要吧~如何用 js 获取虚拟键盘高度？前言 这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解...
js中如何获取元素的高度
热门推荐
勿忘初心的博客
11-18 3万+
一、碎碎念~前言 我们都用过jQuery的CSS()方法，其底层运作就应用了getComputedStyle以及getPropertyValue方法。 对于那些只想混口饭吃的人来讲，晓得CSS()如何使用就足够了。对于希望在JS道路上越走越远的来人说，简单了解一些JS库底层实现对自己的学习很有帮助。可能谈不上信手拈来的使用，至少对创造一些创意新颖的新技术拓宽了思路。 jQuery
如何用 js 获取虚拟键盘高度？（适用所有平台）
weixin_34364135的博客
04-10 2433
原文地址：https://segmentfault.com/a/1190000010693229?utm_source=tag-newest 转载于:https://www.cnblogs.com/phpk/p/10683785.html
javascript获取屏幕高度
最新发布
02-10
### 使用 JavaScript 获取屏幕高度 在网页开发中，可以通过多种方式来获取浏览器窗口的高度。一种常用方法是利用 `window.innerHeight` 属性，该属性返回当前浏览器窗口视口（viewport）的高度，不包括工具栏和滚动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值