假设DOM设置了height:20px和overflow:hidden，如何计算它的真实高度？1.问题背景最近在优化折叠组件时，需要重新评估窗口宽度变化时的展开和折叠状态。如果段落的高度大于给定的高度，超高的内容会被隐藏，显示【展开】按钮。如果段落高度小于给定高度，不限制最大高度，隐藏【展开】按钮。但是如何计算【段落高度小于给定高度】呢？比如一个段落设置了height="20px"，如何计算它的真实高度？二、干货，计算元素真实高度函数的方法如下，直接传入要计算的目标dom即可。函数getHeightUnfold(dom){varfakeNode=dom.cloneNode(true);fakeNode.style.position='absolute';//先插入再改变样式，以防在createdCallback中添加并覆盖元素属性dom.parentNode.insertBefore(fakeNode,dom);fakeNode.style.height='自动';fakeNode.style.visibility='隐藏';varheight=fakeNode.getBoundingClientRect().height;dom.parentNode.removeChild(fakeNode);returnheight;}this方法的核心是创建一个不可见的元素，去掉高度限制，最后计算出它的高度。三、发??散思路1、复制元素的必要性Jenny_L给复制的元素加上postiion:absolute属性，是为了不触发后面元素的重拍和重绘，节省浏览器资源。如果直接快速给目标元素设置height:auto+getheight+height:20px，虽然可以达到目的，但是会造成后续所有元素（不一定可见）抖动，所以尽量避免。2、Node.cloneNode与document.createElement('div')的选择后者与innerHTML结合使用。虽然可以模仿目标元素的内部内容，但是不能继承目标元素的样式。即使使用document.createElement(dom.nodeName)也会有问题，无法继承内联样式。使用cloneNode不仅可以继承class和css，还可以触发createdCallback（如果有），继承js中添加的内联样式。3、fakeNode.getBoundingClientRect().height和getComputedStyle(fakeNode).height的options都是计算高度，但是前者计算的是占用高度，包括padding+border；后者计算简单高度，经过多层css优先竞争后的高度值（px），还需要parseInt()获取纯值。在这种情况下，需要计算空间的高度，所以选择了getBoundingClientRect()。4、removeChild的必要性fakeNode虽然是看不见的，但毕竟在文档流中，显示不是none，重取的时候会参与计算。另外，如果原来的dom有id="someID"，在去掉fakeNode之前，文档中会有两个id="someID"的元素。以后浏览器做选择的时候，会一头雾水。4.由于好久没写文章了，草稿箱里存了很多代码片段，得好好努力了。不得不说，这种小代码片段还是很有分享价值的。一次学习（花了一个小时），以后到处抄袭，走上人生巅峰。
