DOM 5 HTML and Styles

DOM5 HTML – Part 5

Forward: In this part of the series we learn how to set CSS styles in DOM 5.

By: Chrysanthus Date Published: 26 Jul 2012

Introduction

This is part 5 of my series, DOM5 HTML Basics. In this part of the series we learn how to set CSS styles in DOM 5. Yeah, I know you like this tutorial. You most have been waiting for it from the beginning of the series. You want to have the styles of your web page, changing at run time. You want to impress your readers. You have what you want below. I teach you how to do that. I assume, you have read the different parts of the series before reaching here; this is a continuation.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent. etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Using the Style Attribute
Remember, the style is an attribute, even though you can have a style sheet. The following statement shows how to access the style attribute:

    document.getElementById('ID').style.actualStyle

An example is:

    document.getElementById('B1').style.color

After typing the style attribute name, you type a dot and then you type the property of the style. This is the difference between the style attribute and the other attributes, so far as the DOM is concerned. Every other thing is the same. Read and try the following code that gives a color (text) to the body element at run time:

<!DOCTYPE HTML>
<html>
<body id="B1">

    <p>text text text</p>

    <script type="text/ECMAScript">
        document.getElementById('B1').style.color = "blue";
    </script>

<body>
</html>

Style Properties with Hyphens
Some style properties like, background-color, have hyphens. With DOM, when you type such a property, you omit the hyphen. So, for example, you would type, backgroundcolor, instead of background-color. With the style property, casing does not matter. So for background-color, you can type, backgroundColor, BackgroundColor or backgroundcolor. Read and try the following code that gives background color to a paragraph element at run time.

<!DOCTYPE HTML>
<html>
<body>

    <p id="P1">text text text</p>

    <script type="text/ECMAScript">
        document.getElementById('P1').style.backgroundColor = "bisque";
    </script>

<body>
</html>

Quoted Values
Apart from the values, true and false, other values should be in quotes, in DOM. So, the keyword, blue, for color should be in quotes; the keyword, center, for backgroundPosition should be in quotes. Numbers, including their units also have to be typed in quotes. What has been said in this paragraph is applicable to all attributes, not just style attributes.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

DOM 5 HTML and Styles

DOM5 HTML – Part 5

Introduction

Related Links

Comments