Thursday, July 13

Creating and Styling Multiple Elements in JavaScript


Description

A simple function to make it easy to create and style multiple html elements in JavaScript. Pass this function a JavaScript object with the settings you need create and it will return a element with all children elements created and appended.


The Function

function createAndStyle( styles ){
  var elm = document.createElement('div');
  for(var style in styles){
    let value = styles[style];
    if (typeof( value )==='object') {
      let childElm = createAndStyle( value );
      elm.appendChild(childElm);
      elm[style] = childElm;
    } else {
      switch (style){
        case "id":        elm.id = value;           break;
        case "class":
        case "className": elm.className = value;    break;
        default:          elm.style[style] = value; break;
      }
    }
  }
  return elm;
}


The Example Code

let buttonStyle = {
        display: 'inline-block',
        width: '50px',
        height: '50px',
        background: '#777',
        marginLeft: '10px'
    }
  , SideBar = {
      id: 'sideBar_Root',
      position: 'absolute',
      left: '0px',
      top: '1px',
      width: '298px',
      height: 'calc(100% - 4px)',
      padding: '10px',
      background: '#eee',
      border: '1px dashed #333',
      button1: buttonStyle,
      button2: buttonStyle,
      button3: buttonStyle,
      button4: buttonStyle,
      button5: buttonStyle,
      button6: buttonStyle,
      button7: buttonStyle,
      button8: buttonStyle,
      button9: buttonStyle,
      button10: buttonStyle
    };

function init() {
  let body = document.querySelector('body')
    , elm = createAndStyle( SideBar );
    ;
  body.appendChild( elm );
}

window.addEventListener('load', init);



Codepen.io Example

Dynamically Style Element from Variable ( JavaScript )


Introduction

Web browsers have become more and more capable, more powerful, in the recent years. With web pages becoming more complicated and more reliant on JavaScript and CSS I find our CSS files are becoming larger and harder to keep orderly.

Lately, most of the HTML elements in any given project I program, are being created in JavaScript code. Now that the elements are being created in JavaScript, I wanted an easy way to style the elements as well. Making it easier to create more modular components, and free code from having separate CSS files.

Description

Now with a simple function, which I pass the element variable, and a JavaScript object variable with the styles defined, I can easily change the style without having to look through the CSS files.

Settings Variable

var style = {
        position: 'absolute',
        top: '50px',
        left: '50px',
        width: '30%',
        height: '30%',
        background: '#eee',
        border: '1px dashed #333'
      };


The Function
function styleElement( elm, styles ){
  for(var style in styles){
    elm.style[style] = styles[style];
  }
  return elm;
}


The Example Code
var root = {
        width: '100%',
        height: '100%',
        margin: '0px',
        padding: '0px',
        overflow: 'hidden'
    };

function init() {
  let html = document.querySelector('html')
    , body = document.querySelector('body')
    , elm = document.createElement('div')
    ;
  body.appendChild( elm );
  styleElement( html, root );
  styleElement( body, root );
  styleElement( elm, styles );
}

window.addEventListener('load', init);



Codepen.io Example


See the Pen Style Element from jsObject by Failed Sleep (@FailedSleep) on CodePen.