Introduction

As you may know, CSS or Cascading Style Sheets is a language used to style HTML elements. We can have CSS in an external stylesheet, in the HTML <style> tag or in the style attribute of an element.

Now when we have CSS in the style attribute we can access all the style properties within it, in a formatted or unformatted form, using the style property on the element.

The style property for a given element node contains its inline styles and can be used to style HTML elements on the go.

In this chapter we will focus on this useful property of HTML DOM elements, so let's begin the race! JK, you should go slowly and steadily in programming - no need for any haste!

The style property

Before getting into the workings of style let's first consider the HTML below:

<p id="p1">A paragraph</p>

Now if we want to change, let's say, the color of this paragraph, to red, we can simply do the following:

var ele = document.getElementById("p1");
ele.style.color = "red";

A paragraph

First we select the paragraph, then from its style object, we go to the color property and finally change its value to "red".

This code is exactly same as the following - in fact after it gets executed the DOM changes to the following:

<p id="p1" style="color: red">A paragraph</p>
Unlike in CSS, here we don't write the color value without quotes. If we had written the following..
var ele = document.getElementById("p1");
ele.style.color = red
we would not be setting color to the value "red", but rather to a variable red which in this case won't work correctly. So next time, whenever you write CSS using JavaScript, make sure to put quotes around values.

And this is just how the style works for all CSS properties. Above, we looked at color only - now we will discover more CSS properties on this object.

Other CSS properties in style

Let's now go on to change the background-color of the same paragraph above. Notice the name of the relative JavaScript property for background-color:

ele.style.backgroundColor = "yellow";

A paragraph

CSS property names with more than one word seperated by a hypen are replaced by removing the hypen and uppercasing the first letter after it. You've already seen this type of casing previously in many chapters. It is the convention of JavaScript. Consider some examples below:

  1. text-decoration becomes textDecoration
  2. background-image becomes backgroundImage
  3. letter-spacing becomes letterSpacing
  4. border-bottom-color becomes borderBottomColor

One word properties like color, border, padding, margin etc are written as they are.

Taking this all under the hood of an example, if we wanted to apply a color, background color and text-decoration to our paragraph we can simply write the following:

ele.style.color = "red";
ele.style.backgroundColor = "yellow";
ele.style.textDecoration = "underline";

A paragraph

Three statements for each CSS style.

Compared to the code above, there is a shortcut way too of setting multiple CSS properties on the style attribute at once with their original names an that is cssText.

Style attribute's value - cssText

The cssText property holds the value of the style attribute of a given element. It can therefore it can work just like we write inline styles inside the style attribute: names remain the same and values don't need to be quoted seperately.

Rephrasing the example above using cssText we get:

ele.style.cssText = "background-color: yellow;color: red;text-decoration: underline";

A paragraph

style only gives inline styles

One important thing to know about the style property is that it contains values ONLY for those CSS properties that have been set in the style attribute. For example if we had the following CSS rules defined in a <style> tag, or external stylesheet:

p {
color: red;
background-color: yellow;
text-decoration: underline
}

and then if we wrote the following code we won't get the values we expect:

ele.style.color; // ""
ele.style.backgroundColor; // ""
ele.style.textDecoration; // ""

This is because the CSS rules are not inside the paragraphs style attribute.

Only CSS inside the style attribute is computed in the style property.

<p id="p1" style="color: red">A paragraph</p>
ele.style.color; // "red"
ele.style.backgroundColor; // "yellow"
ele.style.textDecoration; // "underline"
Although we didn't explicity mention text-decoration-color in the attribute, its relative JavaScript property would hold the value "initial" instead of "". This is because text-decoration gets computed to its seperate properties.