En este artículo, exploraremos cómo podemos aplicar estilos CSS a elementos HTML. Se recomienda que tenga algunos conocimientos básicos de HTML , CSS , JavaScript y jQuery antes de comenzar este artículo.
Es posible cambiar la propiedad CSS de un elemento usando una API de JavaScript simple, pero tratamos de completar este desafío usando el método jQuery css() .
Sintaxis:
$().css(propertyname, value); $().css(properties);
Hay muchos tipos de métodos CSS, lo que significa que cada método tiene el mismo nombre pero toma diferentes parámetros. Discutiremos solo dos métodos, uno de los cuales se usa para cambiar una sola propiedad de CSS, mientras que el otro se usa para cambiar varias propiedades de CSS simultáneamente. Con el segundo método, puede pasar un objeto de string JSON como parámetro que desea aplicar al elemento HTML.
Los objetos de string JSON contienen propiedades CSS junto con sus valores, y el primer método solo toma 2 parámetros, a saber, el nombre de la propiedad y el valor.
Ejemplo: Al hacer clic en el botón, agrega múltiples propiedades CSS al elemento seleccionado, pero al hacer doble clic en el botón, agrega solo una propiedad CSS. El motivo de este ejemplo es mostrar el uso de dos tipos de métodos CSS que se discuten.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
</head>
<body style="text-align: center;
border: 2px solid green;
min-height: 240px;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="context">
Hello Geeks!! welcome to geeksforgeeks
</p>
<br>
<button id="change">
clickme
</button>
<script>
let css_property =
{
"color": "green",
"font-size": "20px"
}
$('#change').on('click', function () {
// For multiple css property
$('#context').css(css_property);
});
$('#change').on('dblclick', function () {
// For single css property
$('#context').css('display', 'none');
})
</script>
</body>
</html>
Producción:
producción
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA