根据高度隐藏溢出元素

Question

我正在编写（使用纯 JavaScript = no JQuery）一个自定义控件，它是一个容器，当它们跨越多行时折叠它的内容并且只显示第一行。单击控件中的按钮（向下箭头）时，容器会展开所有内容。 如果内容仅跨越 1 行，我根本不显示按钮，它就像一个常规容器。

下面的 2 张图片显示控件折叠（上一张）和展开（下一张）。

我面临的问题是我如何知道何时显示按钮以及何时不显示按钮 = 如何检测内容是多行还是仅跨越一行。我的方法是获取元素的高度，然后折叠它并查看高度是否发生变化（如果发生变化，那么它必须是多行的）。

该方法的问题在于我的函数 createCollapsingPanel() 我正在创建的元素尚未附加到 DOM - 函数 return 元素，然后才会将其附加到 DOM（如下面的 架构 1 所示）。如果那只涉及那 1 个函数，我当然可以在函数内部移动追加（Architecture 2 下面）。不幸的是，这就是我编写所有函数的方式（它们 return 元素，然后才附加到调用它们的外部函数中的父元素中），因此这意味着重写其他父函数结束调用这个，总的来说我的整个功能架构。

架构一

function createOuterElement() {
  var outerElement = document.createElement(...);

  outerElement.appendChild(createInnerElement());
  /* Do other things with outerElement */

  return outerElement;
}

function createInnerElement() {
  var innerElement = document.createElement(...);

  /* Do things with innerElement */

  return innerElement;
}

架构二

function createOuterElement(parentElement) {
  var outerElement = document.createElement(...);

  parentElement.appendChild(outerElement);
  createInnerElement(outerElement);
  /* Do other things with outerElement */
}

function createInnerElement(parentElement) {
  var innerElement = document.createElement(...);

  parentElement.appendChild(innerElement);
  /* Do other things with innerElement */
}

主要问题

关于如何在我当前的架构（架构 1）中处理该问题的任何想法？也许有一个事件我可以附加到控件元素，它会在元素插入 DOM 并为其计算浏览器样式后被调用？

附加问题

在架构 1 中编写函数是否被认为是一种不好的做法？我对非基础知识很陌生 JavaScript，所以我不确定什么是好的做法。

Answer 1

您可以使用 dom 中的隐藏容器来测量元素大小。隐藏容器可以是 dom 中的简单 div，例如：

   ...
   <body>
      <div id="measurementContainer" style="display:none;"></div>

测量函数可以：

将元素附加到测量容器 (div)
测量元素
再次从测量容器中取出

例如：

    function measureElementWidth(element) {
       var measurementContainer = document.getElementById(measurementContainer);
       measurementContainer.appendChild(element);

       var width = element.clientWidth;

       measurementContainer.removeChild(element);

       return width;
}

或者您可以使用 MutationObservers and get notified if an element is added to the dom. check if all needed browsers support 这个。

或更简单：在将元素附加到 dom 后调用调整大小函数即可。

Answer 2

你总是可以让内部容器是多行的，然后将它与外部容器夹在一起。

在外容器上使用：

overflow: hidden
height:一些值

在内胆上使用：

position: absolute
height: auto

将 span 放入内容器中。

您现在可以独立于外部容器测量内部容器的高度。

根据高度隐藏溢出元素

Hiding overflowing element based on its height

javascript

dom

size

web-frontend