JS Blog

?>

Etiqueta: Framework

  • Creando un framework 2: Agregar propiedades CSS (setCSS)

    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:

     

  • Creando un framework: Instanciar elemento (getElement)

    Creando un framework: Instanciar elemento (getElement)

    Una de las cosas interesantes de la programación es la utilización de frameworks que nos ayudan a realizar los proyectos en un mínimo de tiempo, como persona siempre me he preguntado cómo funcionan las cosas y en el ambiente de programación aún más, por lo que ahora he comenzado a plantearme la idea de crear un framework personal con el fin de entender y a la vez facilitar el trabajo.

    Una de las cosas más importantes es la manipulación de los objetos o elementos DOM por medio de JavaScript, entonces comenzaremos por la de instanciar un elemento algo parecido a lo que hace JQuery con $(‘#IdElemento’) o $(‘.claseElemento’).

     

    function getElement(e) //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);
    }
    return element;
}
?>