检测元素是否溢出的最简单方法是什么?
我的用例是，我想限制某个内容框的高度为300px。如果内部内容比这高，我用溢出切断它。但如果它已满，我想显示一个'more'按钮，但如果没有，我不想显示该按钮。
是否有一种简单的方法来检测溢出，或者有更好的方法?
当前回答
出于封装原因，我扩展了Element。从微观回答。
/*
* isOverflowing
*
* Checks to see if the element has overflowing content
*
* @returns {}
*/
Element.prototype.isOverflowing = function(){
return this.scrollHeight > this.clientHeight || this.scrollWidth > this.clientWidth;
}
像这样使用它
let elementInQuestion = document.getElementById("id_selector");
if(elementInQuestion.isOverflowing()){
// do something
}
其他回答
元素可以垂直、水平或同时进行溢出。如果DOM元素被覆盖，这个函数将返回一个布尔值:
function isOverflown(element) {
return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}
function isOverflown(element) { return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; } var els = document.getElementsByClassName('demos'); for (var i = 0; i < els.length; i++) { var el = els[i]; el.style.borderColor = (isOverflown(el) ? 'red' : 'green'); console.log("Element #" + i + " is " + (isOverflown(el) ? '' : 'not ') + "overflown."); } .demos { white-space: nowrap; overflow: hidden; width: 120px; border: 3px solid black; } <div class='demos'>This is some text inside the div which we are testing</div> <div class='demos'>This is text.</div>
ES6例子:
const isOverflown = ({ clientWidth, clientHeight, scrollWidth, scrollHeight }) => {
return scrollHeight > clientHeight || scrollWidth > clientWidth;
}
比较元素。scrollHeight到元素。clientHeight应该做这个任务。
下面是来自MDN解释Element的图片。scrollHeight和Element.clientHeight。
像http://jsfiddle.net/Skooljester/jWRRA/1/这样的代码有用吗?它只是检查内容的高度，并将其与容器的高度进行比较。如果大于，则可以在代码中添加“显示更多”按钮。
更新:增加了在容器顶部创建“Show More”按钮的代码。
jquery的替代答案是使用[0]键来访问原始元素，如:
if ($('#elem')[0].scrollHeight > $('#elem')[0].clientHeight){
如果你正在使用jQuery，你可能会尝试一个技巧:使外部div溢出:隐藏和内部div内容。然后使用.height()函数来检查内部div的高度是否大于外部div的高度。我不确定它是否会工作，但请尝试一下。
