javascript - 将 getComputedStyle 与边框框一起使用应返回无边框和填充的高度

Question

EDIT 3/Final:Th Computed Style problem/question is explained below 但是，为了其他人的利益，我的真正问题是通过 Flex Boxes 和 Vx measurements 与 border-box 一起解决。恕我直言“显示: 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
}

这是防火计算:-

var outerStyle = getStyle(wholeScreen);
fireBreak = Number(outerStyle.paddingBottom.match("[0-9.]*"))
          + Number(outerStyle.borderBottomWidth.match("[0-9.]*"))
          ;

resizeContent();            

编辑 1:好的，让我重新表述一下这个问题:- 如何找出我的 DIV 内容的高度:-

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

我目前必须这样做:-

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

原始问题:-

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

为什么boundryWith和padding不从高度中扣除？

值得庆幸的是，boundryBottomWidth 和 PaddingBottom 返回值已转换为像素(遗憾的是包括“px”字符串)，但标准不是说应该返回可用高度吗？

Answer 1

要获取元素的高度，请不要使用 getComputedStyle .

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

但决不能用它来获取元素的当前高度或宽度。太多因素可能会干扰设置值，一个元素甚至可以在没有任何 CSS 的情况下拥有高度 height规则集。

所以是的...当 height CSS 规则设置为 auto ，你会得到计算值，它可能与元素的实际高度一致，但也可能不是这样。

所以为了得到一个元素的显示高度，没有边框和填充，我们需要自己做一些计算。
Element#getBoundingClientRect()将为我们提供元素的真实显示尺寸，包括转换。 .offsetHeight将为我们提供未转换的高度，包括边框和 .clientHeight将为我们提供带有填充框的未转换高度。

这意味着我们首先必须获取所有边框和填充计算值，然后获取元素的当前比例，最后从我们使用 getBoundingClientRect 获取的值中移除缩放的填充 + 边框框。 .

这是一个示例，它将在元素的边界框顶部绘制一个新的矩形 div，没有填充和边框框。

let marker;
scale.onclick = e => {
  element.classList.toggle('scaled');
  drawRect();
}
boxSizing.onclick = e => {
  element.classList.toggle('boxSized');
  drawRect();
}

function drawRect() {
  // remove previous marker if any
  if (marker && marker.parentNode) {
    marker.remove();
    marker = null;
  }

  // first get the border and padding values
  let computed = getComputedStyle(element);
  let borderLeft = parseFloat(computed.borderLeftWidth);
  let borderWidth = borderLeft + parseFloat(computed.borderRightWidth);
  let borderTop = parseFloat(computed.borderTopWidth);
  let borderHeight = borderTop + parseFloat(computed.borderBottomWidth);
  let paddingLeft = parseFloat(computed.paddingLeft);
  let paddingWidth = paddingLeft + parseFloat(computed.paddingRight)
  let paddingTop = parseFloat(computed.paddingTop);
  let paddingHeight = paddingTop + parseFloat(computed.paddingBottom);

  // get the current bounding rect, including the border-box
  let rect = element.getBoundingClientRect();
  // we need to get the current scale since the computed values don't know about it...
  let scale = 1 / (element.offsetHeight / rect.height);
  // the real displayed height and width without border nor padding
  let height = rect.height - ((borderHeight + paddingHeight) * scale);
  let width = rect.width - ((borderWidth + paddingWidth) * scale);

  // create our rectangle
  marker = document.createElement('div');
  marker.classList.add('marker');
  marker.style.height = height + 'px';
  marker.style.width = width + 'px';
  // we need to scale border + padding again
  marker.style.top = (rect.top + (borderTop + paddingTop) * scale) + 'px';
  marker.style.left = (rect.left + (borderLeft + paddingLeft) * scale) + 'px';
  document.body.append(marker);
}

#element {
  width: 250px;
  border: 0.5em solid green;
  padding: 0.5em;
  margin-top: 12px;
}

#element.scaled {
  transform: scale(2);
  transform-origin: top left;
}

#element.boxSized {
  box-sizing: border-box;
}

.marker {
  position: fixed;
  width: 3px;
  background: rgba(0, 0, 0, .3)
}

<label>scale
  <input id="scale" type="checkbox">
</label>
<label>box-sizing
  <input id="boxSizing" type="checkbox">
</label>
<div id="element">
  Hello
  <br> world
</div>