JavaScript Tutorial

Dynamically Style HTML Elements using JavaScript

Choose Elements to apply this to

Specific targets

Entire Example Content
Example Heading
Example Paragraphs

Class Targets

Top Paragraphs
Middle Paragraphs
Bottom Paragraphs

Styles

Text Color Unchanged Black Red Blue Green White Orange Yellow
Background Color Unchanged White Black Red Blue Green Orange Yellow
Border Style Unchanged No Border Solid Line Dashed Line Dotted Line
Border Width Unchanged 1px 3px 5px 10px
Border Color Unchanged Black Red Blue Green White Orange Yellow
Padding Unchanged 0px 1px 5px 10px 20px 40px 60px 100px
Margin Unchanged 0px 1px 5px 10px 20px 40px 60px 100px
Font Unchanged Arial Times Courier
Font Size Unchanged 10px 12px 14px 16px 18px 20px 24px 28px 32px 42px 72px
Text Alignment Unchanged Left Center Right Justify

Example Content

This is the first paragraph in the example div. This paragraph is not very interesting; however, you may be suprised to find out that despite its lack of interesting content... it is also pointless. In reality, it is just here to take up space and demonstrate a function.

This is the second paragraph in the example div. This paragraph is even less interesting than the first one. It does, however, have some interesting features. For example, the first two sentences in this paragraph were emphasized. Despite the emphasis, you may be suprised to find out that this paragraph is also pointless. In reality, it is just here to take up space and demonstrate a function just like the first paragraph.

This is the third and middle paragraph in the example div. If you haven't noticed by now, these parapgraphs have been a little less than interesting. In fact, they may make some of my old English teachers feel that they have failed atrociously.

This is the fourth and almost last paragraph in the example div. If you haven't noticed by now, these parapgraphs have been very boring. Sorry about that... I just didn't want to use the old lorem ipsum stuff.

This is the fifth and final paragraph in the example div. I actually feel sorry for you if you took the time to read all this. The whole point of this was to point out the use of dynamic formatting/styling with JavaScript.