一开始，任何不是通过亲身实践获得的知识，都不是你的。如果你不经常复习和应用，任何获得的知识都不属于你。记录的由来我在做上拉广告的功能中遇到了一个“自然”的用法，慢慢发现是获取元素高度有问题。记得在书上或者视频里看到过这个问题，已经很久了。使用它，当你使用它时，把它当作理所当然。所以决定深入分析一下用法，增加记忆，记录下来发表，也可以增加前端同行学者的印象。出了什么问题坚持结构、样式、行为分离的原则，每次都把html、css、js分开写，不管大小写。这也算是抛砖引玉说错了。原始css：原始js获取DOM元素高度：varadcon=document.getElementById('adcon');varmaxH=parseInt(adcon.style.height);这样写完后，在控制台发现：返回值为NaN。orz...排查错误，找出原因写个例子测试一下：仔细搜索CSSStyleDeclaration，发现height对应的值为空，就知道为什么返回NaN了。那为什么是“”呢？经过几次测试，我发现这里唯一能获取到的值就是label元素的内联样式的值。也就是说，如果这样写：CSSStyleDeclaration会包括：这种方式会获取值：展开需求解决方案，在各个环境中找到最好的方法关于原生JS中dom元素取宽高的方法，我总结了以下五种方法，如有遗漏，希望各位网友提出建议，谢谢~window.getComputedStyle(domelement,'伪类').属性名domelement.clientHeight/clientWidthdom元素。offsetHeight/offsetWidthdomelement.scrollHeight/scrollWidthdomelement.style.height/width随便说说不练假样式，直接用代码说明即可：getComputedStyle()方法该方法是只读的.具体语法和应用的详细解释可以参考张新旭老师的这篇文章：传送门这表明，这个方法得到的值是内容区域的值，与padding、margin无关和边界。domelement.clientHeight/clientWidth方法显示这是内容区域+上下padding的值。domelement.offsetHeight/offsetWidth可以看出这是内容区域的值+两个paddings+两个边框。dom元素的element.style.height/width开头已经分析过了，得到的是元素的内联样式的高度值（内容区域的值）dom元素.scrollHeight/scrollWidth我加了很多内容example，出现了一个滚动条：测试结果：可以看出scrollHeight方法返回的是content内容区域的值+两个paddings。scrollWidth方法返回文本内容的总宽度。以上结论是通过实际测试得出的。个人觉得比看一大篇枯燥的文字更容易理解。下次实战碰面，就不能再犯错了。小白，粗浅的记录，如有错误，建议，遗漏，请指出。
