La biblioteca JQuery admite casi todos los selectores que se incluyen en la hoja de estilo en cascada (CSS). El método css() en JQuery se usa para cambiar la propiedad de estilo del elemento seleccionado. El css() en JQuery se puede usar de diferentes maneras.
El método css() se puede usar para verificar el valor actual de la propiedad para el elemento seleccionado:
Sintaxis:
$(selector).css(property)
Valor devuelto : Devolverá el valor de la propiedad para el elemento seleccionado.
Ejemplo 1:
Input: $("p").css("color");
Output: Output of the above input will return the
rgb() value of the element.
Código #1:
HTML
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs
/jquery/3.3.1/jquery.min.js">
// this is the link of JQuery CDN direct from the
// jquery website so that we can use all the
//function of JQuery css()
</script>
</head>
<body>
<button>Click here and it will return the color value
of p element</button>
<p style="color:green">Welcome to gfg!</p>
</body>
<script>
$(document).ready(function() {
//here selecting button element
$("button").click(function() {
// here when the button is clicked css() method
// will return the value using alert method
alert($("p").css("color"));
});
});
</script>
</html>
Salida:
antes de hacer clic en el botón-
Después de hacer clic en el botón-
El método css() también se usa para agregar o cambiar la propiedad del elemento seleccionado.
Sintaxis:
$(selector).css(property, value)
Valor devuelto: Esto cambiará el valor de la propiedad para el elemento seleccionado.
Ejemplo 2:
Input: $("p").css("color", "red");
Output: Output of the "p" element becomes red
whatever may be the color previously.
Código #2:
HTML
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs
/jquery/3.3.1/jquery.min.js">
// this is the link of JQuery CDN direct from
// the jquery website so that we can use all
// the function of JQuery css()
</script>
</head>
<body>
<button>Click here and it will return the color value
of p element</button>
<p style="border: 2px solid green;color:red;padding:5px">
Wecome to gfg!.</p>
</body>
<script>
$(document).ready(function() {
// here selecting button element
$("button").click(function() {
// here when the button is clicked css()
// method will change the color of paragraph
$("p").css("color", "green");
});
});
</script>
</html>
Salida:
antes de hacer clic en el botón-
Después de hacer clic en el botón-
El método css() puede usar la función para cambiar la propiedad css del elemento seleccionado:
Sintaxis:
$(selector).css(property, function(index, currentvalue))
Valor devuelto: Volverá con el valor modificado para la propiedad seleccionada.
Ejemplo 3:
Input: $("p").css("padding", function(i){ return i+20;});
Output: Output will get is the paragraph with padding value
increases to "25px" whatever be the initial value.
Código #3:
HTML
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs
/jquery/3.3.1/jquery.min.js">
//this is the link of JQuery CDN direct from
//the jquery website so that we can use all
//the function of JQuery css()
</script>
</head>
<body>
<button>Click here and the padding will change.</button>
<p style="border: 2px solid green;color:green;padding=5px;">
Welcome to gfg!.</p>
</body>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").css("padding", function(h) {
return h + 30;
});
});
});
</script>
</html>
Salida:
antes de hacer clic en el botón-
Después de hacer clic en el botón-
También podemos aplicar más de una propiedad a la vez en JQuery con la ayuda del método css.
Nota: En este método escribimos el nombre de la propiedad en camelCase.
Sintaxis:
$(selector).css({property:value, property:value, ...})
Código #4:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p style="border: 2px solid green;color:green;padding=5px;">
Welcome to gfg!.</p>
<button>Apply css</button>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$("button").click(function(){
//applying more than one property at a time
//Note : property name written in camelCase
$("p").css({"backgroundColor":"green",
"color":"white","fontSize":"20px"});
});
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón-
Después de hacer clic en el botón-
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA