En jQuery, tenemos dos formas de cambiar el ancho de cualquier elemento HTML. El método jQuery css() y el método width(), a continuación, ambos métodos se describen correctamente con el ejemplo.
Método jQuery CSS(‘width’) : es un método presente en jQuery que se utiliza para obtener o establecer la propiedad en el elemento coincidente. Es una propiedad utilizada para obtener o establecer el ancho de cualquier elemento HTML.
Sintaxis:
$('selector').css('width', 'value in px')
Parámetros:
- ancho: Es un nombre de propiedad, por lo que será de tipo string.
- valor: Puede ser una string o un número.
De esta forma de cambiar el ancho, siempre tenemos que agregar » px» en el valor.
Sintaxis:
Para cambiar el ancho, tenemos que proporcionar valor
$("#test").css("width", "200px")
Para obtener el ancho, no proporcionamos ningún parámetro de valor. Devuelve el ancho del elemento seleccionado en px.
$("#test").css("width")
Ejemplo: en este código, imprimiremos el valor de ancho predeterminado del elemento «h3» y luego cambiaremos el ancho a 200px. Esto demuestra obtener o establecer el ancho de un elemento usando css(‘width’)
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<h3>GeeksforGeeks</h3>
<script>
// Getting "h3" element default width
document.write("Width before change : "
+ $("h3").css("width"));
document.write("<br>");
// Changing "h3"element width
$("h3").css("width", "200px")
// Now checking again width
document.write("Width after change : "
+ $("h3").css("width"))
</script>
</body>
</html>
Producción:
css(“ancho”)
Método jQuery width(): este método se utiliza para obtener el ancho del elemento coincidente actual o establecer el ancho de cada elemento coincidente.
Sintaxis:
$('selector').width()
- Parámetro : No acepta ningún argumento.
- Valor devuelto: Devuelve el ancho del primer elemento coincidente.
Ejemplo:
$("#test").width()
Para cambiar el ancho de un elemento, use la siguiente sintaxis
Sintaxis:
$('selector').width("value")
- Parámetro: Acepta un valor como argumento que puede ser el tipo de string o número.
Ejemplo: en el método width() , no necesitamos agregar la palabra px en valor.
$("#test").width("200")
Ejemplo: En esto, haremos lo mismo que el código anterior pero ahora con el método width() .
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<h3>GeeksforGeeks</h3>
<script>
// Getting "h3" element default width
document.write("Width before change : "
+ $("h3").width());
document.write("<br>");
// Changing "h3"element width
$("h3").width("200")
// Now checking again width
document.write("Width after change : "
+ $("h3").width());
</script>
</body>
</html>
Producción:
ancho()
En ambos sentidos, nuestra salida será la misma porque ambos métodos funcionan de la misma manera.
Diferencia entre los métodos css(‘width’) y width() en jQuery:
| css(“ancho”) | ancho() |
|---|---|
| css() es un método y ancho es un nombre de propiedad. | Es uno de los métodos de jQuery dimension. |
| Se utiliza para obtener o establecer el ancho del elemento coincidente. | También se usa para obtener o establecer el ancho del elemento coincidente. |
| En esto, el valor devuelto está en el valor «px» para el ancho de un elemento. | Simplemente proporciona el valor. |
| Devuelve el ancho de un elemento con px agregado al valor. Por ejemplo, $(“h3”).css(“ancho”) devolverá 200px. | Devuelve el valor de ancho del elemento. Por ejemplo, $(“h3”).width() devolverá 200. |
Publicación traducida automáticamente
Artículo escrito por hritikrommie y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA