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