Un elemento HTML se puede ocultar con la ayuda de la función jQuery .hide() o podemos ocultarlo fácilmente haciendo que la visibilidad sea igual a oculta en CSS. Podemos encontrar fácilmente el ancho de este elemento oculto en jQuery.
Hay dos tipos de ancho que se definen con cada elemento HTML, es decir, el ancho interno y el ancho externo del elemento:
- innerWidth: Este ancho se considera cuando no se considera el ancho del borde para el elemento seleccionado.
- outsideWidth: este ancho se considera cuando se considera el ancho del borde para el elemento seleccionado.
Ejemplo 1: este ejemplo muestra cómo calcular el ancho interno del elemento oculto.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
var demo = $("div").innerWidth();
$("#demo").text(demo);
});
});
</script>
<style>
div {
width: 310px;
height: 80px;
font-weight: bold;
color: green;
font-size: 25px;
border: 1px solid green;
visibility: hidden;
border: 2px solid black;
padding: 10px;
}
body {
border: 1px solid black;
padding: 20px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>
Get the width of the hidden
element in jQuery
</h3>
<div>
</div>
<p id="demo">
Here the width of the
hidden "div" element will appear.
</p>
<button id="btn1">Submit</button>
</center>
</body>
</html>
Producción:
-
Antes de hacer clic en el botón:
-
Después de hacer clic en el botón: aquí, el ancho del borde no se agregará al resultado.
Ejemplo 2: Este ejemplo muestra cómo calcular el ancho exterior del elemento oculto.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
var demo = $("div").outerWidth();
$("#demo").text(demo);
});
});
</script>
<style>
div {
width: 310px;
height: 80px;
font-weight: bold;
color: green;
font-size: 25px;
border: 1px solid green;
visibility: hidden;
border: 2px solid black;
padding: 10px;
}
body {
border: 1px solid black;
padding: 20px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>
Get the width of the hidden
element in jQuery
</h3>
<div>
</div>
<p id="demo">
Here the width of the
hidden "div" element will appear.
</p>
<button id="btn1">Submit</button>
</center>
</body>
</html>
Producción:
-
Antes de hacer clic en el botón:
-
Después de hacer clic en el botón: aquí, el ancho del borde se agregará al resultado.
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA