En este artículo, veremos cómo usar el método css() para establecer los estilos en los elementos dinámicamente usando jQuery. El método css() se usa para cambiar la propiedad de estilo del elemento seleccionado.
Sintaxis:
$(selector).css(property)
Enfoque: aquí, hemos agregado un elemento de párrafo y un botón y, después de hacer clic en el botón, se llama al método css() y este método aplica los estilos CSS en el elemento de párrafo.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
What is the use of css() method in JQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
body {
text-align: center;
}
button {
background-color: green;
color: white;
font-size: 24px;
border-radius: 5px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#GFG").css({
color: "white",
background: "green",
fontSize: "25px",
display: "table",
margin: "0px auto 0px auto"
});
});
});
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
What is the use of css() method in JQuery?
</h2>
<p id="GFG">
Welcome to GeeksforGeeks!
</p>
<br>
<button>
Click Here
</button>
</body>
</html>
Producción:
