Javascript 获取元素的内部高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13435604/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting an element's inner height
提问by vsync
How do you get an element's inner height, without padding and borders?
如何在没有填充和边框的情况下获得元素的内部高度？
No jQuery, just pure JS, and a cross-browser solution (IE7 included)
没有 jQuery，只有纯 JS 和跨浏览器解决方案（包括 IE7）
采纳答案by vsync
clientHeight- give the height includingpaddingbut without the borders.
clientHeight- 给出包括填充但没有 边框的高度。
getComputedStyle- a way to tap into the CSS rules of an element and retrieve a property's value (padding)
getComputedStyle- 一种利用元素的 CSS 规则并检索属性值（填充）的方法
Using parseIntis a way to strip away units and leave only the numeric value (which is in pixels) parseFloatcan also be used for more precise sub-pixel measurements
使用parseInt是一种去除单位并只留下数值（以像素为单位）的parseFloat方法，也可用于更精确的子像素测量
Note that all values will automatically be converted by the DOM API to pixels
请注意，所有值都会被 DOM API 自动转换为像素
function getInnerHeight( elm ){
var computed = getComputedStyle(elm),
padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);
return elm.clientHeight - padding
}
DEMO:
演示：
// main method
function getInnerHeight( elm ){
var computed = getComputedStyle(elm),
padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);
return elm.clientHeight - padding
}
// demo utility function
function printInnerHeight( selector ){
console.clear()
console.log(
getInnerHeight( document.querySelector(selector) )
)
}body{ display: flex; padding:0; margin: 0; }
div{ flex: 1; }
.demo1{
padding-top: 2vh;
padding-bottom: 1vh;
margin: 30px;
border: 10px solid salmon;
box-sizing: border-box;
outline: 1px solid red;
}
.demo2{
padding-top: 2vh;
padding-bottom: 4vh;
margin: 30px;
border: 10px solid salmon;
border-bottom-width: 0;
height: 150px;
outline: 1px solid red;
}
p::before{
content: '';
display: block;
height: 100%;
min-height: 50px;
background: lightgreen;
}<div>
<h2>inner height should be ~50px</h2>
<button onclick="printInnerHeight('.demo1')">Get Inner Height</button>
<p class='demo1'></p>
</div>
<div>
<h2>inner height should be ~150px</h2>
<button onclick="printInnerHeight('.demo2')">Get Inner Height</button>
<p class='demo2'></p>
</div>回答by Rajkamal Subramanian
var style = window.getComputedStyle(document.getElementById("Example"), null);
style.getPropertyValue("height");
The above version will work in modern browsers. Please check currentStylefor IE browsers.
上述版本将在现代浏览器中工作。请检查currentStyleIE浏览器。
回答by Mic
EDIT from comments:
从评论编辑：
http://jsfiddle.net/hTGCE/1/(a bit more code then expected)
http://jsfiddle.net/hTGCE/1/（比预期的代码多一点）
in the internet you find functions like this:
在互联网上你可以找到这样的功能：
function getRectangle(obj) {
var r = { top: 0, left: 0, width: 0, height: 0 };
if(!obj)
return r;
else if(typeof obj == "string")
obj = document.getElementById(obj);
if(typeof obj != "object")
return r;
if(typeof obj.offsetTop != "undefined") {
r.height = parseInt(obj.offsetHeight);
r.width = parseInt(obj.offsetWidth);
r.left = r.top = 0;
while(obj && obj.tagName != "BODY") {
r.top += parseInt(obj.offsetTop);
r.left += parseInt(obj.offsetLeft);
obj = obj.offsetParent;
}
}
return r;
}
if you want to subtract the padding / border-width is set in the css-file and not dynamic in the style attribute:
如果要减去 css-file 中设置的 padding / border-width 而不是 style 属性中的动态：
var elem = document.getElementById(id);
var borderWidth = 0;
try {
borderWidth = getComputedStyle(elem).getPropertyValue('border-top-width');
} catch(e) {
borderWidth = elem.currentStyle.borderWidth;
}
borderWidth = parseInt(borderWidth.replace("px", ""), 10);
and with the padding the same. then you calculate it.
和填充相同。然后你计算它。
回答by Tilepaper
You can simply use the clientHeightand clientWidthproperties.
您可以简单地使用clientHeight和clientWidth属性。
MDN web doc for Element.clientHeight— clientWidth works exactly the same way.
Element.clientHeight 的 MDN 网络文档——clientWidth 的工作方式完全相同。
回答by john Smith
i had the same problem and found out there is no native cross plattform solution but the solution is easy though
我遇到了同样的问题，发现没有本地跨平台解决方案，但解决方案很简单
var actual_h = element.offsetHeight;
if(parseInt(element.style.paddingTop.replace('px','')) > 0){
actual_h=actual_h - parseInt(element.style.paddingTop.replace('px',''));
}
if(parseInt(element.style.paddingBottom.replace('px','')) > 0){
actual_h=actual_h - parseInt(element.style.paddingBottom.replace('px',''));
}
