Hay muchos casos, especialmente a medida que el contenido se vuelve más interactivo, en los que el desarrollador desea que los estilos se activen dinámicamente en función de la entrada del usuario, que parte del código se haya ejecutado en segundo plano y más. En este tipo de escenarios, el modelo CSS que involucra reglas de estilo o estilos en línea no ayuda.
La solución para superar todos estos problemas es una que involucra JavaScript/jQuery. No solo permite diseñar el elemento con el que interactúan los usuarios, lo que es más importante, sino que también permite a los desarrolladores diseñar elementos en toda la página. Esta libertad es muy poderosa y va mucho más allá de la capacidad limitada de CSS para diseñar contenido dentro de sí mismo.
- JavaScript:
- removeAttribute() : elimina un atributo con el nombre especificado del elemento.
- setAttribute() : Establece el valor de un atributo en el elemento especificado.
Ejemplo-1: El siguiente ejemplo ilustra cómo configurar/eliminar estilos en JavaScript.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>JavaScript example</title></head><body><div><pid="gfg">Welcome to geeks for geeks</p></div><buttontype="button"id="setstyle"onclick="setstyle()">Set Style</button><buttontype="button"id="removestyle"onclick="removestyle()"disabled>Remove Style</button></body><scripttype="text/javascript">removestyle =() => {document.getElementById("gfg").removeAttribute("style");document.getElementById("setstyle").removeAttribute("disabled");document.getElementById("removestyle").setAttribute("disabled", "true");};</script></html>Salida:
Antes de diseñar:
Después de hacer clic en Establecer estilo:
Después de hacer clic en Eliminar estilo:
- jQuery:
- css() : Establece o devuelve una o más propiedades de estilo para los elementos seleccionados.
- attr() :Se utiliza para establecer o devolver atributos y valores de los elementos seleccionados.
- removeAttr() : Elimina uno o más atributos de los elementos seleccionados.
Ejemplo-2: El siguiente ejemplo ilustra cómo configurar/eliminar estilos en jQuery.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Jquery example</title>integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="crossorigin="anonymous"></script></head><body><div><p id="gfg">Welcome to geeksforgeeks</p></div><button type="button"id="setstyle"onclick="setstyle()">Set Style</button><button type="button"id="removestyle"onclick="removestyle()"disabled>Remove Style</button></body><script type="text/javascript">$(document).ready(() => {setstyle =() => {$("#gfg").css({"color":"white","background-color":"green","padding":"10px",});$("#setstyle").attr("disabled","true");$("#removestyle").removeAttr("disabled");}});</script></html>Salida:
Antes de diseñar:Después de hacer clic en Establecer estilo:
Después de hacer clic en Eliminar estilo:
Publicación traducida automáticamente
Artículo escrito por AnkitMishra16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA