确定HTML元素的内容是否溢出 [英] Determine if an HTML element's content overflows

问题描述

如果HTML元素溢出其内容，我可以使用JavaScript检查（不管滚动条）吗？例如，一个小的，固定大小的long div，overflow属性设置为visible，元素上没有滚动条。

解决方案

通常，您可以比较客户端[Height | Width] 和滚动[Height | Width] 这...但是当溢出是可见的时，值将是相同的。因此，检测例程必须考虑到这一点：

  //确定传递的元素是否溢出其边界
 //垂直或水平。 
 //将临时修改overflow样式以检测此
 //如有必要。 
 function checkOverflow（el）
 {
 var curOverflow = el.style.overflow; 
 
 if（！curOverflow || curOverflow ===visible）
 el.style.overflow =hidden; 
 
 var isOverflowing = el.clientWidth< el.scrollWidth 
 || el.clientHeight< el.scrollHeight; 
 
 el.style.overflow = curOverflow 
 
 return isOverflowing; 
} 
  

在FF3，FF40.0.2，IE6，Chrome 0.2.149.30中测试。 / p>

Can I use JavaScript to check (irrespective of scrollbars) if an HTML element has overflowed its content? For example, a long div with small, fixed size, the overflow property set to visible, and no scrollbars on the element.

解决方案

Normally, you can compare the client[Height|Width] with scroll[Height|Width] in order to detect this... but the values will be the same when overflow is visible. So, a detection routine must account for this:

// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
function checkOverflow(el)
{
   var curOverflow = el.style.overflow;

   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}

Tested in FF3, FF40.0.2, IE6, Chrome 0.2.149.30.

这篇关于确定HTML元素的内容是否溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！