Se pueden agregar uno o más estilos a los elementos HTML mediante el método jQuery css() . Incluso podemos crear alguna clase CSS personalizada con los estilos requeridos que queremos agregar y agregar esa clase usando el método addClass() . En este artículo, veremos las dos formas de agregar una o más propiedades de estilo.
Método css(): El método css() se utiliza para cambiar la propiedad de estilo del elemento seleccionado. El css() en JQuery se puede usar de diferentes maneras.
Sintaxis:
-
Para un solo estilo:
$('selector').css('property':'value'); -
Para múltiples estilos:
$('selector').css({ 'property1': 'value1', 'property2': 'value2' });
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<!-- Including jQuery -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
button {
color: white;
background-color: #006600;
width: auto;
height: 30px;
margin-top: 5px;
}
body {
text-align: center;
}
p {
font-size: 60px;
}
div {
margin: 5px;
height: auto;
width: auto;
position: relative;
text-align: center;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<button id="CSS">Click to see effect</button>
<br />
<div id="GFG">
jQuery is one of the powerful libraries
<br /> of javascript which has many
powerful<br /> methods that make the
manipulation of<br /> DOM much simpler
using the selectors and<br /> makes the
interaction with DOM much easier.
</div>
<script>
$(document).ready(function() {
$("#CSS").click(function() {
$("#GFG").css({
"font-style": "italic",
"font-family":
"Courier New, Courier, monospace",
"background-color": "lime",
"font-weight": "bold",
color: "#006600",
});
});
});
</script>
</body>
</html>
Producción:
método css()
Usando el método addClass(): El método addClass() se usa para agregar las clases al elemento en particular. Podemos agregar algunas propiedades CSS a las clases agregadas.
Sintaxis:
-
Para clase única:
$('selector').addClass('class_name'); -
Para varias clases:
$('selector').addClass('class_name1 class_name2');
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<!-- Including jQuery -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
button {
color: white;
background-color: #006600;
width: auto;
height: 30px;
margin-top: 5px;
}
body {
text-align: center;
}
div {
margin: 5px;
height: auto;
width: auto;
position: relative;
text-align: center;
display: flex;
justify-content: center;
}
.new_class {
font-style: italic;
font-family: Courier New, Courier, monospace;
background-color: grey;
font-weight: bold;
color: #006600;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p><b>jQuery addClass() method</b></p>
<button id="CSS">Click to add class</button>
<br />
<div id="GFG">
jQuery is one of the powerful libraries
<br /> of javascript which has many
powerful<br /> methods that make the
manipulation of<br /> DOM much simpler
using the selectors and<br /> makes the
interaction with DOM much easier.
</div>
<script>
$(document).ready(function() {
$("#CSS").click(function() {
$("#GFG").addClass("new_class");
});
});
</script>
</body>
</html>
Producción:
método addClass()
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA