javascript - 如何仅当div的宽度超过一定高度时才显示按钮javascript？

Question

我想仅当 div 的高度超过特定高度时才显示按钮。单击此按钮后，它应该显示 div 的完整内容。

我想做什么？

我有一个包含列表项的侧面板(这是一个包含 svg、span 和 time 元素的 div)，现在当这个 div 的高度超过 max-height (49px) 时，它应该显示一个按钮，然后单击此按钮应该显示 div 的完整内容...

到目前为止我已经尝试过什么？我已将列表项内的 div 的最大高度设置为 49px，并将溢出设置为隐藏。

我为每个列表项添加了一个按钮，其 ID 为“show_button”，其显示最初设置为无。 andi 使用下面的代码检查 div 的高度是否超过最大限制。

if (document.getElementsByClassName('div_list').offsetHeight < 
    document.getElementsByClassName('div_list').scrollHeight) {
        document.getElementById('show_button').style.display = 'inline';}
}

但这不起作用...当我记录 div_list 的 offsetheight 和scrollheight 时，我得到了未定义。

下面是代码，

<li>
   <div className="div_list">
       <div className="details">
           <Svg/>
           <span>some text exceeding div height some text exceeding div 
               height some text exceeding div height some text exceeding div 
               height some text exceeding div height
           </span>
       </div>
       <time>{time_var}</time>
   </div>
   <button id="show_button" onClick={this.handle_show_btn}><SvgAccUp/> 
   </button>

handle_show_btn = () => {
    document.getElementsByClassName('div_list').style.overflow = 'visible';
};

render = () => {
    if (document.getElementsByClassName('div_list').offsetHeight < 
        document.getElementsByClassName('div_list').scrollHeight) {
            document.getElementById('show_button').style.display = 'inline';
    }}

CSS 代码，

.div_list {
    max-height: 49px;
    overflow: hidden;
 }

 #show_button {
     display: none;
 }

将有多个带有 div 类名 div_list 的列表项，如果其中任何一个高度超过 49px，则应显示按钮。有人可以让我知道如何解决它吗？谢谢。

Answer 1

getElementsByClassName 返回一个类似数组的结构。它不会具有您正在寻找的属性，但其中的各个元素可能会具有。尝试选择其他方式，或使用数组中的第一个元素，或此处适合您需要的任何内容。