「overflow:visible」であっても、JavaScript は HTML 要素コンテンツのオーバーフローをどのように検出できますか?

JavaScript を使用した HTML 要素のコンテンツ オーバーフローのチェック

HTML 要素のコンテンツが定義されたサイズを超えると、オーバーフローが発生する可能性があります。表示されているオーバーフローは標準チェックを使用してチェックできますが、「overflow:visible」プロパティを使用してオーバーフローをチェックすると課題が生じる可能性があります。

JavaScript ソリューション

これを考慮するには、JavaScript 関数は次のようになります。採用:

function checkOverflow(el) {
   var curOverflow = el.style.overflow;

   // If overflow is 'visible' or not set
   if (!curOverflow || curOverflow === "visible") {
      // Temporarily set overflow to 'hidden'
      el.style.overflow = "hidden";
   }

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

   // Restore original overflow style
   el.style.overflow = curOverflow;

   return isOverflowing;
}

使用法:

問題の HTML 要素をパラメーターとして checkOverflow 関数に渡し、そのコンテンツがオーバーフローしているかどうかを判断します。この関数は、オーバーフローがある場合は true を返し、そうでない場合は false を返します。

互換性:

このソリューションは、Firefox 3 および 40、Internet Explorer 6 でテストされています。 、Chrome 0.2.149.30.

以上が「overflow:visible」であっても、JavaScript は HTML 要素コンテンツのオーバーフローをどのように検出できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。