时间戳

首页 > 解决方案 > 仅当 div 的宽度超过特定高度 javascript 时如何显示按钮？

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

问题描述

我只想在 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，则应显示按钮。有人可以让我知道如何解决它。谢谢。

标签： javascriptreactjs

解决方案

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

推荐阅读