En este artículo, veremos cómo establecer el color de fondo de elementos específicos usando jQuery.
Para establecer el color de fondo , usamos el método css() . Este método nos ayuda a agregar propiedades CSS de forma dinámica .
Sintaxis:
$("tag-name").css("property-name", "value");
Enfoque: hemos creado tres elementos dentro de la etiqueta del cuerpo, es decir, los elementos <h1>, <h2> y <p>. Aplicamos la propiedad CSS en todos los elementos, es decir, <h1>, <h2> y <p>.
Ejemplo 1: En este ejemplo, vamos a utilizar el método CSS() que establece dinámicamente el color de fondo de nuestros elementos.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h1").css("background-color" , "red");
$("h2").css("background-color" , "yellow");
$("p").css("background-color" , "green");
});
</script>
</head>
<body>
<h1>Hello GeeksforGeeks</h1>
<h2>Hello Geeks</h2>
<p>How Are You!!</p>
</body>
</html>
Producción:
color de fondo
Ejemplo 2: En este ejemplo, vamos a utilizar el método addClass() para establecer el color de fondo de los elementos.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h1").addClass("first");
$("h2").addClass("second");
$("p").addClass("third");
});
</script>
<style>
.first{
background-color:green;
}
.second{
background-color:orange;
}
.third{
background-color:violet;
}
</style>
</head>
<body>
<h1>Hello GeeksforGeeks</h1>
<h2>Hello Geeks</h2>
<p>How Are You!!</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamabhishekkalra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA