CSS Object Model

CSS Object Model
Nikhil
Published on 2021-07-09 05:42:01

CSS Object Model (CSSOM) - 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 CSS Object Model (CSSOM)


The browser identifies tokens from the stylesheet and covers them into nodes that 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 the 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.

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website