Cambiar Color en Caja CSS

Cambiar de Color una Caja CSS

Estructura básica de Jquery para cambiar de color a una caja css en index.html.

Librería de JQuery link Bajar la version comprimida. Download the compressed, production version. link

JQuery UI link

JQuery Mobile link

JQuery Plugins link

Bajar el archivo

Bajar el archivo jquery-3.7.1.min.js y guardarlo en: /home/enrique/Sites/Tests/JQUERY/jquery/js/jquery-3.7.1.min.js

En index.html Código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Introducción a JQuery</title>

    <link rel="stylesheet" href="css/estilo.css">

    <script src="js/jquery-3.7.1.min.js"></script>

</head>
<body>
    
    <div id="caja"></div>

    <script src="js/codigo.js"></script>
</body>
</html>

En css/estilo.css Código:

.body {
  margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: Arial, sans-serif;
}

#caja {
  width: 200px;
  height: 100px;
  background-color: blue;
  cursor: pointer;
}

En js/codigo.js Código:

$(document).ready(function() {
    $("#caja").click(function() {
        $(this).css("background-color", "red");
    });
});

imagen

imagen

Podemos agregar mas parámetros

En js/codigo.js Código:

$(document).ready(function() {
    $("#caja").click(function() {
        $(this).css(
            {
                "background-color": "yellow",
                "width": "600px",
                "height": "100px"
            }
        );
    });
});

imagen

Documentación | TJWeb | JQuery | Cambiar de Color una Caja CSS