Wie kann JavaScript überlaufenden Inhalt in HTML-Elementen erkennen, auch ohne sichtbare Bildlaufleisten?

Erkennen übergelaufener Inhalte in HTML-Elementen mithilfe von JavaScript

Bei der Webentwicklung ist es wichtig sicherzustellen, dass der Inhalt der Elemente nicht über ihre Grenzen hinausgeht Grenzen, auch wenn Bildlaufleisten nicht sichtbar sind. Dieses Problem kann beispielsweise bei Elementen mit einer festen Größe und der Einstellung „Überlauf“ auf „sichtbar“ auftreten.

Um festzustellen, ob der Inhalt eines Elements übergelaufen ist, können Sie JavaScript nutzen. Der Standardansatz besteht darin, die Client[Höhe|Breite] des Elements mit seiner Scroll[Höhe|Breite] zu vergleichen. Wenn die Überlaufeigenschaft jedoch auf „sichtbar“ gesetzt ist, sind diese Werte identisch.

Um dieses Problem zu beheben, ist eine ausgefeiltere Erkennungsroutine erforderlich, wie durch die folgende JavaScript-Funktion veranschaulicht:

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;
}

Diese Funktion setzt den „Überlauf“-Stil des Elements vorübergehend auf „versteckt“, um die scrollHeight- und scrollWidth-Werte korrekt zu berechnen. Nach der Berechnung wird der ursprüngliche Überlaufstil wiederhergestellt. Durch den Vergleich dieser Werte mit clientHeight und clientWidth des Elements kann festgestellt werden, ob ein Element entweder vertikal oder horizontal überläuft.

Dieser Ansatz wurde in verschiedenen Browsern getestet, darunter Firefox 3, Firefox 40.0.2 und Internet Explorer 6 und Chrome 0.2.149.30.

Das obige ist der detaillierte Inhalt vonWie kann JavaScript überlaufenden Inhalt in HTML-Elementen erkennen, auch ohne sichtbare Bildlaufleisten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!