Change style property using JavaScript

How to change style properties using JavaScript ?

Following example shows you how to change style dynamically in JavaScript.

In some occasions you may want to change the appearance of html elements dynamically. You can use JavaScripts to do this. Using Javascript you can set these style attributes dynamically. The following example shows you how to change style properties using javascript.

This example shows you how to change style properties using JavaScript. You can test this by selecting style properties from Style Settings section. Your changes will appear here. Remember that some style properties may not work in some browsers. In such case please use another browser to test this example. This example shows how to change, Font Family Font Size Font Color Text Decoration Text Transformation Background Color Text Align Letter Spacing using Javascript. Style Settings Font Family : Select Arial, Helvetica, sans-serif Times New Roman, Times, serif Courier New, Courier, monospace Georgia, Times New Roman, Times, serif Verdana, Arial, Helvetica, sans-serif Geneva, Arial, Helvetica, sans-serif Font Size 10 11 12 13 14 15 16 17 18 19 20 Font Color Black White Red Blue Yellow Green Brown Orange Text Decoration None Blink Line Through Overline Underline Text Transform None Capitalize Lowercase Uppercase Background Color Black White Red Blue Yellow Green Brown Orange Text Align Center Justify Left Right Letter Spacing Normal 1 2 3 4 5 6 7 8 9 10

1. Change background color in JavaScript.

html code

<p id='text-to-change'>Place your text here</p>

Javascript Code

document.getElementById("text-to-change").style.background = '#FCFCFC';

2. Change font family using JavaScript.

html code

<p id='text-to-change'>Place your text here</p>

Javascript Code

document.getElementById("text-to-change").style.fontFamily = "Verdana, Arial, Helvetica, sans-serif";

3. Change font color in JavaScript.

html code

<p id='text-to-change'>Place your text here</p>

Javascript Code

document.getElementById("text-to-change").style.color = '#ADADAD';

4. Change font size using JavaScript.

html code

<p id='text-to-change'>Place your text here</p>

Javascript Code

document.getElementById("text-to-change").style.fontSize = '10px';

5. Change text alignment in JavaScript.

html code

<p id='text-to-change'>Place your text here</p>

Javascript Code

document.getElementById("text-to-change").style.textAlign='center';//left,right,justify

6. Change text case using JavaScript.

html code

<p id='text-to-change'>Place your text here</p>

Javascript Code

document.getElementById("text-to-change").style.textTransform='capitalize';//capitalize,lowercase,uppercase,none

7. Change text decoration in JavaScript.

html code

<p id='text-to-change'>Place your text here</p>

Javascript Code

document.getElementById("text-to-change").style.textDecoration='underline'; //overline, line-through, blink, none

8. Change letter spacing using JavaScript.

html code

<p id='text-to-change'>Place your text here</p>

Javascript Code

document.getElementById("text-to-change").style.letterSpacing='2';;

©-Copyright By Duminda Chamara JavaScript Validation