Can someone explain what the style object is? Is it an HTML DOM Property or a JavaScript Object? And how does it relate to:

• HTML
• CSS
• DOM
• JavaScript

And then can you do the same thing for the inline HTML style attribute, but also tell me how this attribute pares to an event attribute like onclick. Thank you in advance for your help.

Can someone explain what the style object is? Is it an HTML DOM Property or a JavaScript Object? And how does it relate to:

• HTML
• CSS
• DOM
• JavaScript

And then can you do the same thing for the inline HTML style attribute, but also tell me how this attribute pares to an event attribute like onclick. Thank you in advance for your help.

• javascript
• html
• css
• dom
• browser

• .style accesses the element Style (JS is supposed to do that :) an element style object has a collection all the element's styles retrieved by the browser. onclick is a method that attaches the click handler to an element. Otherwise the question is pretty vague. – Roko C. Buljan Commented Jun 8, 2013 at 3:42
• Asking what “the style object” is postulates that there is such an object, but you are not defining what that means. In effect, you are asking for a lecture on a very vaguely described topic, rather than presenting a practical problem that you are facing. – Jukka K. Korpela Commented Jun 8, 2013 at 11:19
• Here is a link to what I was looking at: msdn.microsoft./en-us/library/ie/ms535870(v=vs.85).aspx and I'm still a little unclear as to what the style object is. That is, on a low level, like does the browser view this code <p onclick="this.style.cssText = 'color:red;'">Hi</p> specifically this.style.cssText as JavaScript code? Does it have to send the onclick value to the JavaScript interpreter? Because I thought the browser had to see the <script> tag to invoke the JavaScript interpreter. Sorry for being a little vague, but I was hoping for some details like @Mark is sharing – Dusty Commented Jun 8, 2013 at 12:31

3 Answers 3

In this example,

<span id="myspan" style="color:red">some red text</span>

style is an HTML attribute. Its value contains CSS. You can access it via JavaScript by first retrieving the HtmlElement object,

var myspan = document.getElementById('myspan');

And then accessing its style property,

myspan.style

Which is a JavaScript object, which has its own set of properties, such as color.

The "DOM" is essentially the name given to HTML once it has been processed into a tree-like structure by your browser. It can be rendered to your screen, or manipulated via JavaScript. "HTML" is essentially just text until your browser does something with it.

If an HTML element contains inline style attribute with style declarations, for example

<div style="color:red; background-color:white;" id="example"> example text </div>

then these inline declarations will be stored in DOM in element's style object as element's properties:

var element = document.getElementById('example');
alert(element.style.color + element.style.backgroundColor); // 'red white'

This element.style object is useful for easy adjusting element's styles.

Quote from Mozilla's website: "the style property has the same (and highest) priority in the CSS cascade as an inline style declaration via the style attribute, it is useful for setting style on one specific element." This means: if browser have to choose between multiple declared styles the one that should be applied to an element, then inline style has higher priority than other selectors, e.g.

#example { color:blue; }

<div id="example" style="color:red;"> example text </div>

and so in this case the red color is applied to the element.

So in most cases changing element.style.propertyName also changes element's appearance on the page. The only exception i know of, is !important overridance rule. For example:

#example { color:blue !important; } /* force color to blue */

<div style="color:red;" id="example"> example text </div>

alert(element.style.color); // alerts 'red', even though the text is forced to blue

alert(window.getComputedStyle(element,null).getPropertyValue('color')); // alerts 'rgb(0,0,255)' ~ blue

(The above is also the reason why it's remended to use the !important modifier very carefully and sparingly.)

To answer the rest of your question: the DOM's onclick property (or HTML's onclick attribute) is a legacy from older browsers, but it's still very useful in many cases where you need to attach only single event handler. For attaching multiple event handlers we can use addEventListener DOM method. Simple test here.

Consider this HTML tag:

<input type="text" id="search" />

You can access this element in JavaScript:

var search = document.getElementById('search');

Now, you have a variable called search and it is an object:

typeof search;
// object

alert(search.constructor.name);
// HTMLInputElement

The style attribute is available for such elements. It is an object:

search.style;
// CSSStyleDeclaration {parentRule: null, length: 0, cssText: "", alignmentBaseline: "", background: ""…}

And whenever you change a property of it, it will affect your DOM in browser:

search.style.backgroundColor = 'red';

Now your textbox will be red in the browser.

• You can check the jsFiddle Demo.