En este artículo, aprenderemos cómo obtener los estilos (ancho, alto, color de texto y color de fondo) de una división en la que se hizo clic usando jQuery.
Enfoque: el método css() se utiliza para obtener los valores de propiedad CSS del elemento seleccionado en jQuery. Usamos el método css() en jQuery que toma una array de nombres de propiedades y devuelve una array de valores de esas propiedades. Almacenamos esta array y la usamos para mostrar el CSS de todos los div en los que se hizo clic.
Sintaxis:
var styles = $(this).css([
"width",
"height",
"color",
"background-color",
]);
Ejemplo: El siguiente código demuestra el enfoque anterior. Consulte la salida para una mejor comprensión. Al hacer clic en un div, muestra las propiedades de ancho, alto, color y color de fondo y sus valores respectivos.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
<style>
div {
height: 50px;
margin: 5px;
padding: 5px;
}
#htmlDivID {
width: 300px;
color: yellow;
background-color: blue;
}
#cssDivID {
width: 310px;
color: green;
background-color: grey;
}
#jQueryDivID {
width: 320px;
color: pink;
background-color: blue;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<b>
Click to see the div
element's styles
</b>
<div id="htmlDivID">HTML</div>
<div id="cssDivID">CSS</div>
<div id="jQueryDivID">jQuery</div>
<br />
<div id="displayID"></div>
<script>
$("div").click(function () {
var cssValues = [];
var styles = $(this).css([
"width",
"height",
"color",
"background-color",
]);
$.each(styles, function (prop, value) {
cssValues.push("<b>" + prop
+ "</b>: " + value + ", ");
});
$("#displayID").show().html(cssValues);
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en div:
- Después de hacer clic en div:
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA