Eliminar una propiedad CSS usando jQuery
-
Quitar una propiedad CSS usando jQuery
.css()API -
Quitar una propiedad CSS usando jQuery
.prop()API -
Eliminar una propiedad CSS usando jQuery
.removeAttr()API -
Eliminar una propiedad CSS usando jQuery
.removeClass()API
Este artículo enseña cuatro métodos para eliminar una propiedad CSS usando jQuery. Estos métodos utilizarán cuatro API jQuery que son .css(), .removeAttr(), .removeClass() y .prop().
Quitar una propiedad CSS usando jQuery .css() API
En jQuery, utilizará por defecto la API .css() para establecer una propiedad CSS y su valor en un elemento. A partir de esto, jQuery aplicará la propiedad y el valor como estilos en línea a través del atributo estilo de HTML.
Pero también puede usarlo para eliminar una propiedad CSS configurando el valor de la propiedad en una cadena vacía. Esto significa que este método no funcionará si el CSS es de la etiqueta <estilo> o de una hoja de estilo CSS externa.
Hemos aplicado una propiedad CSS a un elemento usando jQuery .css() API en el siguiente código. Luego, puede presionar el botón; esto llama a una función que eliminará la propiedad CSS.
El núcleo de la función es establecer el valor de una propiedad CSS en una cadena vacía.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-remove-CSS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<main>
<p id="test">Random Text</p>
<button id="remove_css">Remove CSS</button>
</main>
<script>
$(document).ready(function(){
// Add two CSS properties
$("#test").css({
'font-size': '2em',
'background-color': 'red'
});
/*
* Remove the CSS properties.
*/
$("#remove_css").click(function() {
$("#test").css({
'font-size': '',
'background-color': ''
});
// Remove the click event.
$("#remove_css").off('click');
});
});
</script>
</body>
</html>
Producción:
Quitar una propiedad CSS usando jQuery .prop() API
Puede usar la API de jQuery .prop() para eliminar una propiedad CSS si ha aplicado el CSS a través de la API de jQuery .css(). Esto se debe a que dicho elemento tendrá el atributo estilo al que puede acceder utilizando la API .prop().
A continuación, actualizamos el código anterior para usar la API .prop() para eliminar la propiedad CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-remove-CSS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<main>
<p id="test">Random Text 2.0</p>
<button id="remove_css">Remove CSS</button>
</main>
<script>
$(document).ready(function(){
// Add two CSS properties
$("#test").css({
'font-size': '3em',
'background-color': '#1560bd'
});
/*
* Remove the CSS properties.
*/
$("#remove_css").click(function() {
let element_with_css_property = $("#test").prop('style');
element_with_css_property.removeProperty('font-size');
element_with_css_property.removeProperty('background-color');
// Remove the click event.
$("#remove_css").off('click');
});
});
</script>
</body>
</html>
Producción:
Eliminar una propiedad CSS usando jQuery .removeAttr() API
La API .removeAttr() eliminará una propiedad CSS eliminando el atributo estilo del elemento. Esto significa que el CSS debe estar en línea, o lo ha aplicado usando la API .css() de jQuery.
El botón eliminará todas las propiedades CSS eliminando el atributo estilo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>03-jQuery-remove-CSS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<main>
<p id="test">Random Text 3.0</p>
<button id="remove_css">Remove CSS</button>
</main>
<script>
$(document).ready(function(){
// Add two CSS properties
$("#test").css({
'padding': '2em',
'border': '5px solid #00a4ef',
'font-size': '3em'
});
/*
* Remove the CSS properties.
*/
$("#remove_css").click(function() {
$("#test").removeAttr('style');
// Remove the click event.
$("#remove_css").off('click');
});
});
</script>
</body>
</html>
Producción:
Eliminar una propiedad CSS usando jQuery .removeClass() API
La API .removeClass() eliminará una propiedad CSS agregada a través de la etiqueta <style> o una hoja de estilo externa. Si pasa un nombre de clase, lo eliminará; de lo contrario, eliminará todos los nombres de clase del elemento.
El siguiente ejemplo muestra .removeClass() en acción.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>04-jQuery-remove-CSS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.colorful_big_text {
color: #1560bd;
font-size: 3em;
}
</style>
</head>
<body>
<main>
<p id="test"><i>Random Text 4.0</i></p>
<button id="remove_css">Remove CSS</button>
</main>
<script>
$(document).ready(function(){
// Add a CSS class that contains CSS properties
$("#test").addClass('colorful_big_text');
/*
* Remove the CSS properties.
*/
$("#remove_css").click(function() {
$("#test").removeClass();
// Remove the click event.
$("#remove_css").off('click');
});
});
</script>
</body>
</html>
Producción:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn