Javascript 使用带边框框的getComputedStyle应返回高度，无边框和填充

编辑3/最终版：下面解释了计算风格问题，但为了后面的其他人，我的真正问题是通过弹性盒和Vx测量以及边框盒解决的。IMHO“display:flex；”是许多问题的答案，尽管我正在努力让它实现我想要的功能，但它停止了您对CSS的工作

编辑2：下面的内容无疑需要重构，但如果你能告诉我它符合我的要求，那就太好了。我必须做的改变是在等式中添加clientTop和offsetTop：-

function resizeContent()
{
var browserHeight = window.outerHeight;
var offesetHeight, offsetWidth;

var viewHeight = window.innerHeight;
var viewWidth  = window.innerWidth;

var chromeFootPrint = browserHeight - viewHeight;
var tmpHeight = viewHeight;

if (window.matchMedia("(orientation: portrait)").matches) {
    if (viewWidth > viewHeight) {
        viewHeight = viewWidth - chromeFootPrint;
        viewWidth = tmpHeight + chromeFootPrint;
    }
} else {
    if (viewWidth < viewHeight) {
        viewHeight = viewWidth - chromeFootPrint;
        viewWidth = tmpHeight + chromeFootPrint;
    }
}

var dimTarget  = logScroll;
var offsetTop  = dimTarget.offsetTop  + dimTarget.clientTop;
var offsetLeft = dimTarget.offsetLeft + dimTarget.clientLeft;

while (dimTarget = dimTarget.offsetParent) {
    offsetTop  += dimTarget.offsetTop  + dimTarget.clientTop;
    offsetLeft += dimTarget.offsetLeft + dimTarget.clientLeft;
}

logScrollHeight        = viewHeight - (offsetTop + fireBreak);
logScroll.style.height = logScrollHeight + "px";
logScroll.style.width  = getStyle(contentDiv).width;
logWindow.style.height = logScroll.style.height;
logWindow.style.width  = logScroll.style.width;

logWindow.scrollTop = logWindow.scrollHeight - logScrollHeight;

contentDiv.style.visibility = "visible"; // Now we're presentable
}

编辑1：好的，让我重新回答这个问题：-我如何通过以下方式找到我的DIVs内容的高度：-

width: 250px;
border: 3px solid green;    
padding: 0.5em;
box-sizing: border-box;

我目前必须这样做：-

logScrollHeight = viewHeight - 
    (offsetTop + Number(getStyle(headerDiv).paddingBottom.match("[0-9.]*")));

原始问题：-

这肯定是重复的，但经过近一个小时的观察，我发现了许多类似/相同的问题，但没有真正的答案：-(

为什么边界和填充不从高度中扣除

---

谢天谢地，boundryBottomWidth和PaddingBottom返回值已转换为像素（包括“px”字符串），但标准中不是说应该返回可用高度吗？

当您将框大小设置为边框框时：

宽度和高度属性包括内容、填充和边框，但不包括边距

因此，当您使用getComputedStyle获取元素的高度时，它当然包括填充和边框的高度

---

您可以查看和

以获取元素的高度，但不使用

getComputedStyle

getComputedStyle

只能用于获取当前从不同样式表应用的解析值。换句话说，您可以将其视为一个活动样式表，仅针对单个元素，具有标准化单位

但决不能使用它来获取元素的当前高度或宽度。太多的因素可能会干扰设置值，并且元素甚至可以在没有任何CSS

height

规则集的情况下具有高度

因此，是的……当

高度

CSS规则设置为

自动

时，您将获得计算值，该值可能与元素的实际高度一致，但也可能不一致

因此，为了获得元素的显示高度，在没有边框和填充的情况下，我们需要自己进行一些计算。

元素#getBoundingClientRect（）

将为我们提供元素的真实显示尺寸，包括转换。

.offsetHeight

将为我们提供包括边框框在内的未转换高度，

.clientHeight

将为我们提供带填充框的未转换高度

这意味着我们首先必须获得所有边界和填充计算值，然后获得元素的当前比例，最后从使用

getBoundingClientRect

获得的值中删除缩放的填充+边界框

下面是一个示例，它将在元素的边界框顶部绘制一个新的矩形div，而不使用填充和边框框

let标记；
scale.onclick=e=>{
element.classList.toggle（'scaled'）；
drawRect（）；
}
boxSizing.onclick=e=>{
element.classList.toggle（'boxSized'）；
drawRect（）；
}
函数drawRect（）{
//删除以前的标记（如果有）
if（marker&&marker.parentNode）{
marker.remove（）；
标记=空；
}
//首先获取边框和填充值
let computed=getComputedStyle（元素）；
让borderLeft=parseFloat（计算得出的borderLeftWidth）；
让borderWidth=borderLeft+parseFloat（计算得出的.borderRightWidth）；
让borderTop=parseFloat（计算得出的borderTopWidth）；
让borderHeight=borderTop+parseFloat（计算得出的borderBottomWidth）；
让paddingLeft=parseFloat（computed.paddingLeft）；
让paddingWidth=paddingLeft+parseFloat（computed.paddingRight）
让paddingTop=parseFloat（computed.paddingTop）；
让paddingHeight=paddingTop+parseFloat（computed.paddingBottom）；
//获取当前边界矩形，包括边框框
设rect=element.getBoundingClientRect（）；
//我们需要得到当前刻度，因为计算值不知道它。。。
让比例=1/（元素偏视/直线高度）；
//实际显示的高度和宽度（无边框或填充）
让高度=矩形高度-（（边界高度+填充高度）*比例）；
让宽度=矩形宽度-（（边框宽度+填充宽度）*比例）；
//创建我们的矩形
marker=document.createElement（'div'）；
marker.classList.add（'marker'）；
marker.style.height=高度+px；
marker.style.width=宽度+px；
//我们需要再次缩放边框+填充
marker.style.top=（rect.top+（borderTop+paddingTop）*比例）+“px”；
marker.style.left=（rect.left+（borderLeft+paddingLeft）*比例）+“px”；
document.body.append（标记）；
}

#元素{
宽度：250px；
边框：0.5em纯绿色；
填充：0.5em；
边缘顶部：12px；
}
#元素。缩放{
变换：尺度（2）；
变换原点：左上角；
}
#元素。盒大小{
框大小：边框框；
}
.马克{
位置：固定；
宽度：3倍；
背景：rgba（0,0,0,3）
}

比例
盒子尺寸
你好

世界

顺便说一句，有人建议显示：内联以外的。我试过了，但没有改变。我不清楚这个问题，但听起来你没有使用正确的工具。

getComputedStyle

只返回当前分配的规则，在解析和序列化之后，你无法从中获取元素的高度（例如，可以将其包装在缩放的元素中）要获取元素的高度，可以调用其

getBoundingClientRect

方法，或者调用其

clientHeight

或

offsetHeight

属性，具体取决于所需内容。@Kaido clientHeight扣除边框宽度，但仍包括填充。offsetHeight包括以下两个属性：-（任意）

logScrollHeight = viewHeight - 
    (offsetTop + Number(getStyle(headerDiv).paddingBottom.match("[0-9.]*")));