Wie kann JavaScript einen Überlauf von HTML-Elementinhalten erkennen, selbst mit „overflow: sichtbar'?

Inhaltsüberlauf in HTML-Elementen mit JavaScript prüfen

Wenn der Inhalt eines HTML-Elements seine definierten Abmessungen überschreitet, kann es zu einem Überlauf kommen. Während ein sichtbarer Überlauf mithilfe von Standardprüfungen überprüft werden kann, kann die Prüfung auf einen Überlauf mit der Eigenschaft „overflow: sichtbar“ eine Herausforderung darstellen.

JavaScript-Lösung

Um dies zu berücksichtigen , eine JavaScript-Funktion kann sein eingesetzt:

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

Verwendung:

Übergeben Sie das betreffende HTML-Element als Parameter an die checkOverflow-Funktion, um festzustellen, ob sein Inhalt überläuft. Die Funktion gibt „true“ zurück, wenn ein Überlauf vorliegt, andernfalls gibt sie „false“ zurück.

Kompatibilität:

Diese Lösung wurde in Firefox 3 und 40, Internet Explorer 6 getestet und Chrome 0.2.149.30.

Das obige ist der detaillierte Inhalt vonWie kann JavaScript einen Überlauf von HTML-Elementinhalten erkennen, selbst mit „overflow: sichtbar'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!