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