javascript - JS检查内容是否垂直溢出

Question

这个问题已经有答案了:

Determine if an HTML element's content overflows (5 个回答)

已关闭 6 年前。

如果垂直溢出，需要做一些事情。引导我走向正确的方向。

示例:

.contents {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

<div class="contents">
CONTENT CCC<br>
CONTENT CCC<br>
CONTENT CCC<br>
CONTENT CCC<br>
CONTENT CCC<br>
CONTENT CCC<br>
CONTENT CCC<br>
CONTENT CCC<br>
<div>


<!-- This would result to do an action. ->

Answer 1

https://jsfiddle.net/qq3w1k3a/

如果通过 CSS 设置高度，您可以根据 scrollHeight 检查样式中指定的高度。 a.e 以下内容将根据提供的元素的滚动高度是否大于指定的大小发出警报 true 或 false。

function check_height(ele) {
  let styleHeight = +getComputedStyle(ele).getPropertyValue('height').slice(0,-2);
  alert(ele.scrollHeight > styleHeight);
}

编辑:详细说明+getCompulatedStyle(ele).getPropertyValue('height').slice(0,-2);

getComputedStyle(ele) 是一个窗口方法，顾名思义，它会获取指定元素的所有样式。返回的对象有一个名为 getPropertyValue 的方法，允许您指定要获取的属性(在本例中为 height)。

.slice(0, -2) 只是一个普通的数组方法，它删除字符串的最后两个字符。 (因为字符串只是一个字符数组，所以这是有效的)

前面的+符号是自动将值转换为整数，而不是将其保留为字符串。