Horje

CSS - CSS Object Model (CSSOM)
Start
  Adding a background-image rule via the CSSOM

To add a background-image rule via the CSSOM, first get a reference to the rules of the first stylesheet:

var stylesheet = document.styleSheets[0].cssRules;

Then, get a reference to the end of the stylesheet:

var end = stylesheet.length - 1;

Finally, insert a background-image rule for the body element at the end of the stylesheet:

stylesheet.insertRule("body { background-image: url('http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico'); }", end);
  Introduction

The browser identifies tokens from stylesheet and coverts them into nodes which are linked into a tree structure. The entire map of all the nodes with their associated styles of a page would be the CSS Object Model.

To display the webpage, a web browser takes following steps.

  • The web browser examines your HTML and builds the DOM (Document Object Model).
  • The web browser examines your CSS and builds the CSSOM (CSS Object Model).
  • The web browser combines the DOM and the CSSOM to create a render tree. The web browser displays your webpage.

    • enter image description here (opens new window)

    Remarks

    The CSS Object Model (CSSOM) is a specification on its own.

    The current draft can be found here: https://www.w3.org/TR/cssom-1/ (opens new window)

    		 

    Read Article
    https://develop.horje.com/learn/1434/reference

     

    Horje