La tarea es agregar style=display: “block” a un elemento con la ayuda de jQuery.
- Hay múltiples funciones o métodos para hacer este trabajo, estos son los siguientes:
- .css(): establezca una o más propiedades CSS para el conjunto de elementos coincidentes.
Sintaxis:$("div").css("display", "block")
- .show(): muestra los elementos coincidentes y es más o menos equivalente a llamar a .css(“display”, “block”).
Sintaxis:$("div").show()
- .attr(): establece uno o más atributos para el conjunto de elementos coincidentes.
Sintaxis:$("div").attr("style", "display:block")
Ejemplo 1: Uso del método .css()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> How to add `style=display:“block”`to an element using jQuery? </title> <style> p { color: green; font-weight: bold; cursor: pointer; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"> </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2> Using .css()</h2> <div> How to add <p>`style=display:“block”` </p> to an element using jQuery? </div> <script> var words = $("p").first().text().split(/\s+/); var text = words.join("</span> <span>"); $("p").css("display", "block"); </script> </body> </html>
Producción:
Ejemplo 2: Uso del método .attr()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> How to add `style=display:“block”` to an element using jQuery? </title> <style> p { color: green; font-weight: bold; cursor: pointer; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"> </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2> Using .attr()</h2> <div> How to add <p>`style=display:“block”`</p> to an element using jQuery? </div> <script> var words = $("p").first().text().split(/\s+/); var text = words.join("</span> <span>"); $("p").attr("style", "display:block") </script> </body> </html>
Producción:
Ejemplo 3: Uso del método .show()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>How to add `style=display:“block” `to an element using jQuery?</title> <style> p { color: green; font-weight: bold; cursor: pointer; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"> </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2> Using .show()</h2> <div> How to add <p>`style=display:“block”`</p> to an element using jQuery? </div> <script> var words = $("p").first().text().split(/\s+/); var text = words.join("</span> <span>"); $("div").show(); </script> </body> </html>
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA