原生js获取html元素高度,原生JS获取元素宽高实践详解

开篇的话

任何不是亲身实践中求得的知识，都不是属于你的。

任何求得的知识不去时常温习运用，也不是属于你的。

记录由来

在做个上拉广告功能中遇到了一个“理所当然”觉得对的用法，慢慢才排查出是获取元素高度那里出了问题，这个问题记忆在书上或视频中看到过，许久没用，用的时候就想当然了。遂决定深入剖析用法，增加记忆，记录发表出来，也能给各位前端同行、求学者增加印象。

出错之处

秉承结构、样式、行为分离的宗旨，每次不管大小案例都是分开写html、css、js。这也算抛砖引出了我犯错的玉。

原css：

原js获取DOM元素高度：

var adcon = document.getElementById('adcon');

var maxH = parseInt(adcon.style.height);

这样写之后在console的时候发现：

返回值为NaN。 Orz...

排查错误，找出原因

写个例子测试一下：

仔细查找CSSStyleDeclaration发现height对应值为空

这样就知道为什么会返回NaN了。

那为什么会是""的，百一下谷一下测试一下发现：

这个test.style.xxx 这里只能获取的值是标签元素行内样式的值。

也就是说如果这样写：

CSSStyleDeclaration里才会包括：

这种方式就会取得到值：

扩展需求解决办法，找到各个环境下的最优方法

关于原生JS取dom元素宽高的方法，我总结了以下五种方法，有遗漏的望各位网友提出，谢谢~

window.getComputedStyle(dom元素,'伪类').属性名

dom元素.clientHeight/clientWidth

dom元素.offsetHeight/offsetWidth

dom元素.scrollHeight/scrollWidth

dom元素.style.height/width

光说不练假把式，直接上codes来解释：

getComputedStyle()方法

这个方法是只读的，具体语法和应用的详细讲解可以参见张鑫旭大佬的这篇：传送门

由此可见，这个方法取得值是内容content区域的值，与padding、margin和边框无关。

dom元素.clientHeight/clientWidth方法

可见这是内容区域+上下padding的值。

dom元素.offsetHeight/offsetWidth

可见这是内容区域+两个padding+两个border的值

dom元素.style.height/width

这一开始分析过了，取得是元素行内样式的height值(内容区域的值)

dom元素.scrollHeight/scrollWidth

我给例子加了很多内容，出现滚动条：

测试结果：

由此可见，scrollHeight方法返回的还是content内容区域+两个padding的值。

scrollWidth方法返回的是正文内容的总宽度

以上是通过实际测试得出来的结论，个人认为比看一大片干巴巴的文字更容易理解。下一次在实战中遇见应该不会再犯错了。

小白一枚，浅面记录，如有错误、建议、缺漏，恳请指出。

原生js获取html元素高度,原生JS获取元素宽高实践详解相关推荐

5分钟学会js上传图片校验图片格式、大小、尺寸宽高
js上传图片校验图片格式.大小.尺寸宽高一.前言 js上传图片校验图片格式.大小.尺寸宽高. 在此记录下,分享给大家. 二.代码 <input type=" ...
php 正则花括号,JS+正则取得小括号、中括号及花括号内容步骤详解
这次给大家带来JS+正则取得小括号.中括号及花括号内容步骤详解,JS+正则取得小括号.中括号及花括号内容的注意事项有哪些,下面就是实战案例,一起来看一下. JS 正则表达式获取小括号中括号花括号 ...
[css] img标签是行内元素，为什么却能设置宽高
[css] img标签是行内元素,为什么却能设置宽高原来CSS中还有一个概念:可替换元素MDN上是这么解释的:在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS ...
html中js隐藏div的高度,jQuery实现获取隐藏div高度的方法示例
jQuery实现获取隐藏div高度的方法示例发布时间:2020-09-22 19:27:55 来源:脚本之家阅读:95 作者:zhuyangxing 本文实例讲述了jQuery实现获取隐藏div高 ...
js html 处理json数据,JS中Json数据的处理和解析JSON数据的方法详解
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...
【JS 逆向百例】某网站加速乐 Cookie 混淆逆向详解
声明本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 逆向目标目标:加速乐加密 ...
Android获取的状态栏高度,Android中获取状态栏高度的两种方法分享
前言最近在做一个关于FAB的功能的时候需要获取状态栏的高度,在网上查了很多种方法,下面是选出的比较合理的两个方法.主要参考stackoverflow的这篇问答:http://stackoverflo ...
js 浅拷贝直接赋值_JS中实现浅拷贝和深拷贝的代码详解
(一)JS中基本类型和引用类型 JavaScript的变量中包含两种类型的值:基本类型值和引用类型值,在内存中的表现形式在于:前者是存储在栈中的一些简单的数据段,后者则是保存在堆内存中的一个对象. ...
JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）
这里是javascript中制作滚动代码的常用属性页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; wi ...

原生js获取html元素高度,原生JS获取元素宽高实践详解

原生js获取html元素高度,原生JS获取元素宽高实践详解相关推荐

最新文章

热门文章