The difference between CSS Attributes and Properties

Attributes

Menu Attributes

The difference between CSS Attributes and Properties

This is an area that I find is not well explained.

An example of this is the [attribute*=value] Selector. I came across this when I was analysing the code for my Responsive Design. In this case the attribute that I am "matching" ( [] - square brackets) is a class with a Universal Selector

A DOM Element can have attributes and properties, class and id seem to be both. Element (Tags) also have names, these tags have attributes and properties.

Top

javascript.info

javascript.info do a better job in explaining this and recognises that there is an issue here. W3C seem to use the descripton attribute and property interchangably.

javascript.info say:

When the browser loads the page, it “reads” (another word: “parses”) the HTML and generates DOM objects from it. For element nodes, most standard HTML attributes automatically become properties of DOM objects.

For instance, if the tag is <body id="page">, then the DOM object has body.id="page".

Dot Notation

There are many places where I have used this and not really realised it.

document.getElementById("htext").innerHTML = "Experiments with the Document Object Model";

The difference between CSS Attributes and Properties

Links