La tarea es aplicar la propiedad CSS a un elemento secundario usando jQuery. Para hacerlo, primero seleccionamos el elemento secundario con la ayuda del método children() en jQuery y luego le aplicamos la propiedad CSS con la ayuda del método css() en jQuery.
Sintaxis:
// Note : children method selects the direct child to parent
$(selector).children("selector").css("property-name","value")
Ejemplo 1
HTML
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
How to apply CSS property to a
child element using JQuery?
</title>
<!-- Link of JQuery cdn -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<div class="parent">
<h2 class="child-1">i am child-1.</h2>
<p class="child-2">i am child-2.</p>
</div>
<button>Apply css</button>
<script>
$("button").click(function () {
// select div element which is the parent
// select first child(h2) and apply one
// or more css property at a time
$("div").children("h2").css({
"backgroundColor": "black", "color": "white" });
// apply one property at a time, use
// property name just like css and
// then select second child element(p)
$("div").children("p").css("background-color", "red");
$("div").children("p").css("color", "white");
});
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
También podemos aplicar la propiedad CSS al nieto y a cualquier descendiente al padre con la ayuda del método find() en jQuery.
Sintaxis:
$(selector).find("descendants-name").css("property-name","value");
Ejemplo 2:
HTML
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
How to apply CSS property to a
child element using JQuery?
</title>
<!-- Link of JQuery cdn -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<div class="parent">
<h2 class="child-1">i am child-1.</h2>
<p class="child-2">i am child-2.
<span>i am grand-child-1</span>
</p>
</div>
<button>Apply css</button>
<script>
$("button").click(function () {
// select div element which is the parent
// select first child(h2) and apply one
// or more css property at a time
$("div").find("h2").css({
"backgroundColor": "black",
"color": "white"
});
// Apply one property at a time, use
// property name just like css
// and then select second child element(p)
$("div").find("p").css("background-color", "red");
$("div").find("p").css("color", "white");
// Apply on grand-child
$("div").find("span").css({
"backgroundColor": "black",
"color": "white"
});
});
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA