0

编辑 3/Final：Th Computed Style 问题/问题在下面解释，但为了以后其他人的利益，我的真正问题是通过 Flex Boxes 和 Vx 测量以及边界框来解决。恕我直言“显示：弯曲；” 是许多问题的答案，尽管我正在努力让它做我想做的事，但你不必与 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”字符串），但标准不是说应该返回可用高度吗？

4

2 回答 2

1

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

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

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

所以是的...当heightCSS 规则设置为 时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>

于 2017-07-16T08:19:40.637 回答
0

当您将 box-sizing 设置为边框框时：

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

所以当你使用getComputedStyle获取元素的高度时，当然包括padding和border的高度。

你可以看看box-sizing 属性和css box model

于 2017-07-15T13:32:41.623 回答