Creando un framework 2: Agregar propiedades CSS (setCSS)

En esta ocasión se van a agregar las propiedades al elemento, en la ocasion pasada instanciamos un elemento con la funcion «getElement«, ahora utilizaremos esa misma función y la convinaremos con setCSS para agregar las propiedades CSS.

Primer paso crear una etiqueta en nuestro cuerpo del HTML, al presionarla se activara la función start.

<a onclick='start()'>Cambia mis propiedades!</a>

Ahora en JavaScript crearemos dos funciones, la función start y setCSS ademas de la que ya habiamos creado antes getElement.

start= function()
{
	setCSS();
}

function getElement(e, attributes)//receive element name or css selector (#id, .class, p, etc.)
{
    var element;
    try
    {
        element = document.getElementById(e);
        if (element == null)
            element = document.querySelector(e);
    }
    catch(err)
    {
        console.log(err.message);
    }
    setCSS(element, attributes);
    return element;
}
function setCSS(e, attributes)
{
    for (var p in attributes)
        if (attributes.hasOwnProperty(p)) 
           e.style[p] = attributes[p];
}

En la función setCSS esta recibiendo dos valores, uno es el elemento ya instanciado y los atributos como objeto, ya saben {propiedad: valor}, dentro de la función se crea un ciclo que verifique si tiene una propiedad y deser asi aplicara la propiedad en el esilo del elemento.

Entonces se agregaria el elemento que queremos modificar y algunas propiedades en la función setCSS dentro de la función start, esto quedaria algo así:

start= function()
{
	setCSS(getElement('a'), {background:"#13748b", color: '#f3f3f3', 'border-radius': '30px', padding: '10px', 'margin-top': '10px'});
}

El resultado final seria algo como esto: