JavaScript を使用して HTML 要素のオーバーフローを検出するにはどうすればよいですか?

要素のオーバーフロー ステータスの調査

HTML 要素を操作する場合、そのコンテンツが指定された境界を超えているかどうかを判断することが多くの場合重要です。これにより、開発者は、オーバーフロー インジケーターの表示やそれに応じたレイアウトの調整などの機能を実装できます。

これを実現する 1 つのアプローチは、DOM 要素のオーバーフロー ステータスを評価する isOverflown() 関数を利用することです。垂直方向と水平方向の両方のオーバーフロー条件を評価し、ブール値を返します。

function isOverflown(element) {
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

この関数は、さまざまなシナリオで使用できます。たとえば、前述のユースケースでは、高さ制限が 300 ピクセルの要素にその高さを超えるコンテンツが含まれているかどうかを識別するために利用できます。オーバーフローが検出された場合は、「詳細」ボタンを表示できます。それ以外の場合は、非表示にします。

isOverflown() のユーティリティを実証するには、次の JavaScript スニペットを検討してください:

var elements = document.getElementsByClassName('demos');
for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
  element.style.borderColor = (isOverflown(element) ? 'red' : 'green');
  console.log("Element #" + i + " is " + (isOverflown(element) ? '' : 'not ') + "overflown.");
}

このデモの CSS:

.demos {
  white-space: nowrap;
  overflow: hidden;
  width: 120px;
  border: 3px solid black;
}

HTML :

<div class='demos'>This is some text inside the div which we are testing</div>
<div class='demos'>This is text.</div>

以上がJavaScript を使用して HTML 要素のオーバーフローを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。