Monday, November 8, 2010

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 :
Font Size
Font Color
Text Decoration
Text Transform
Background Color
Text Align
Letter Spacing


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

1 comments:

Khánh Minh said...

Bổ sung sức khỏe cho trẻ chính là nhiệm vụ hàng đầu 1234 diet drops , vì vậy với những sản phẩm như l'il critters fiber gummy bears , bio island dha sẽ giúp các mẹ làm được điếu này mà ít phải tốn nhiều công sức . Làm đẹp chính là một phần không thể thiếu đối với mọi phụ nữ , những sản phẩm như the great cover up ultimate concealer , love me for me flawless foundation sẽ giúp bạn có được điều mình mong muốn một cách dể dàng. Vệ sinh cho trẻ là vấn đề thường làm đau đầu nhiều bà mẹ nhưng với baby shampoo sẽ giúp các bà mẹ hoàn nhành nhanh chóng, để trị họ cho trẻ có nhiều cách nhưng dùng siro trị ho muhi là một giải pháp không hề tồi chút nào . Muốn làn da trắng sáng không quá khó như bạn nghĩ , chỉ cần oxynergy white exception serum sẽ làm chọ bạn thỏa mản mà không phải tốn quá nhiều thời gian và công sức.