CODEWITHSUNDEEP
javascripthtmlcssdombrowser
Dusty
Dusty

Reputation: 1083

The style object and HTML attibute

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

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

Upvotes: 2

Views: 2160

Answers (3)

Stano
Stano

Reputation: 8939

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 recommended 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.

Upvotes: 2

mpen
mpen

Reputation: 282825

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.

Upvotes: 4

user1823761
user1823761

Reputation:

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.

Upvotes: 1

Related Questions