Dado un elemento HTML y la tarea es determinar si su contenido está desbordado o no usando JavaScript.
Acercarse:
- Seleccione el elemento para verificar el desbordamiento del formulario.
- Verifique su propiedad style.overflow, si es ‘visible’, entonces el elemento está oculto.
- Además, verifique si su clientWidth es menor que scrollWidth o clientHeight es menor que scrollHeight, entonces el elemento se desborda.
Ejemplo 1: en este ejemplo, verifique que el contenido del párrafo (elemento <p>) esté desbordado o no.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to determine the content of
HTML elements overflow or not
</title>
<style>
#GFG_UP {
font-size: 16px;
font-weight: bold;
border: 1px solid black;
height: 20px;
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP"></p>
<br><br>
<button onclick = "gfg_Run()">
Click here
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var str = "Click on button to check OverFlow";
el_up.innerHTML = str;
function check(el) {
var curOverf = el.style.overflow;
if ( !curOverf || curOverf === "visible" )
el.style.overflow = "hidden";
var isOverflowing = el.clientWidth < el.scrollWidth
|| el.clientHeight < el.scrollHeight;
el.style.overflow = curOverf;
return isOverflowing;
}
function gfg_Run() {
ans = "No Overflow";
if (check(el_up)) {
ans = "Content Overflowed";
}
el_down.innerHTML = ans;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: Esto es igual que el ejemplo anterior, pero aquí el contenido del párrafo (elemento <p>) no se desborda, por lo que el ejemplo verifica y muestra la salida deseada Sin desbordamiento .
<!DOCTYPE HTML>
<html>
<head>
<title>
How to determine the content of
HTML elements overflow or not
</title>
<style>
#GFG_UP {
font-size: 16px;
font-weight: bold;
border: 1px solid black;
height: 20px;
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP"></p>
<br><br>
<button onclick = "gfg_Run()">
Click here
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var str = "Click on button to check";
el_up.innerHTML = str;
function check(el) {
var curOverf = el.style.overflow;
if ( !curOverf || curOverf === "visible" )
el.style.overflow = "hidden";
var isOverflowing = el.clientWidth < el.scrollWidth
|| el.clientHeight < el.scrollHeight;
el.style.overflow = curOverf;
return isOverflowing;
}
function gfg_Run() {
ans = "No Overflow";
if (check(el_up)) {
ans = "Content Overflowed";
}
el_down.innerHTML = ans;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA