.click() de jQuery adjunta un evento de clic a elementos seleccionados o lo desencadena, manejando eventos de forma compatible con todos los navegadores.
Leer másContenido.
Contenido.
El método .css() de jQuery se utiliza para obtener o establecer propiedades CSS en los elementos seleccionados. Es una forma conveniente de aplicar estilos directamente desde JavaScript, ya sea individualmente o en múltiples propiedades a la vez.
Definición:
El método .css() puede ser utilizado para:
- Obtener el valor de una propiedad CSS de un elemento.
- Establecer una o más propiedades CSS en uno o más elementos.
Sintaxis:
- Obtener una propiedad CSS:
index.js
JavaScript
$(selector).css(propertyName)selector: Un selector de jQuery que selecciona los elementos de los que se desea obtener la propiedad CSS.propertyName: Unstringque indica el nombre de la propiedad CSS que se desea obtener.
- Establecer una propiedad CSS:
index.js
JavaScript
$(selector).css(propertyName, value)propertyName: Unstringque indica el nombre de la propiedad CSS que se desea establecer.value: Unstringque indica el valor que se le desea asignar a la propiedad CSS.
- Establecer múltiples propiedades CSS:
index.js
JavaScript
$(selector).css({property1: value1, property2: value2, ...}){property1: value1, property2: value2, ...}: Un objeto que contiene pares de propiedad-valor para establecer múltiples propiedades CSS a la vez.
Ejemplo:
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de .css() en jQuery</title>
<style>
.cuadro {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#botonObtener").click(function(){
var color = $("#cuadro").css("background-color");
alert("El color de fondo es: " + color);
});
$("#botonEstablecer").click(function(){
$("#cuadro").css("background-color", "red");
});
$("#botonEstablecerMultiples").click(function(){
$("#cuadro").css({
"width": "200px",
"height": "200px",
"background-color": "green"
});
});
});
</script>
</head>
<body>
<button id="botonObtener">Obtener Color de Fondo</button>
<button id="botonEstablecer">Establecer Color de Fondo a Rojo</button>
<button id="botonEstablecerMultiples">Establecer Múltiples Propiedades</button>
<div id="cuadro" class="cuadro"></div>
</body>
</html>
index.js
JavaScript
$("#botonObtener").click(function(){
var color = $("#cuadro").css("background-color");
alert("El color de fondo es: " + color);
});
$("#botonEstablecer").click(function(){
$("#cuadro").css("background-color", "red");
});
$("#botonEstablecerMultiples").click(function(){
$("#cuadro").css({
"width": "200px",
"height": "200px",
"background-color": "green"
});
});Explicación del Ejemplo:
Explicación del ejemplo: En este ejemplo, hay tres botones que realizan diferentes acciones con el método .css():
- Obtener una propiedad CSS: Al hacer clic en el botón “Obtener Color de Fondo”, se muestra una alerta con el color de fondo actual del
divcon el id “cuadro”. - Establecer una propiedad CSS: Al hacer clic en el botón “Establecer Color de Fondo a Rojo”, se cambia el color de fondo del
diva rojo. - Establecer múltiples propiedades CSS: Al hacer clic en el botón “Establecer Múltiples Propiedades”, se cambian múltiples propiedades CSS del
div, incluyendo el ancho, la altura y el color de fondo.
