AutoClass es una librería que permite generar y aplicar estilos CSS dinámicos a elementos HTML utilizando atributos personalizados.
Incluye el script en tu documento HTML:
<script src="https://cdn.devetty.es/AutoClassJS/js"></script>Para usar AutoClass, simplemente agrega el atributo auto-class a cualquier elemento HTML que desees estilizar automáticamente. El valor del atributo debe seguir el formato propiedad:valor.
<script src="https://cdn.devetty.es/AutoClassJS/js"></script>
<div auto-class="margin-top:1rem border:1px-solid-red padding-left:1rem text-align:center">
<h1>hola</h1>
</div>Después de procesar el documento, el HTML se verá así:
<div class="margin-top-1rem border-1px-solid-red padding-left-1rem text-align-center">
<h1>hola</h1>
</div>La librería generará automáticamente los estilos CSS necesarios:
.margin-top-1rem {
margin-top: 1rem;
}
.border-1px-solid-red {
border: 1px solid red;
}
.padding-left-1rem {
padding-left: 1rem;
}
.text-align-center {
text-align: center;
}- Inicialización: La librería se inicializa y crea un objeto
AutoClasspara almacenar las clases generadas. - Estilos: Se inserta una etiqueta
<style>en el documento para contener los estilos generados. - Generación de Clases: Se procesan los elementos con el atributo
auto-classy se generan las clases CSS correspondientes. - Observador de Mutaciones: Se utiliza un
MutationObserverpara observar cambios en el DOM y procesar nuevos elementos con el atributoauto-class.
Las contribuciones son bienvenidas. Puedes abrir un issue o enviar un pull request en el repositorio de GitHub.