DIV/SPAN
Moving Stuff around
Changing Appearance of Elements using Style
Changing Appearance of Elements using Style
The ability to change the style of an element using javascript is a very useful and powerful feature. As you may know styles are used to set the appearance of elements in Web developing - so changing the style will change the appearance of the element. As always, a demonstration....
The source code for the above element is '<div id="element">What's Up Doc?</div>'. Change the appearance of the above text to anything below.
| Change the color | Green Pink Brown |
| The background | Gold Black Image 1 Image 2 |
| The Border | Color Style Width |
| Dimensions |
Width - Increase Decrease (For best results, enable the border and then click on the change width option multiple times) Height - Increase Decrease |
| Visibility | Visible - Hidden |
| Change multiple stuff at once | Class 1 Class 2 |
| And... | Much Much More |
');){kind=link}
');){kind=link}
To see the code that does the job of changing the appearance, just click the above link and take a look at the below text area - the code will be shown there - or there is always the 'View Source' option.
Try it yourself.
We do all of this using the 'style' property of an element. The style can be anything that can be used as a CSS style. The following format is to be used for all style changes.
document.getElementById('ID_OF_THE_ELEMENT').style.TYPE = 'NEW_VALUE';
The equivalent CSS statement will be
#ID_OF_THE_ELEMENT {
TYPE : NEW_VALUE;
}
An example
document.getElementById('name').style.color = 'blue';
And the CSS will be
#name {
color : blue;
}
It goes without saying that to use this feature to the best possible manner, you have to know CSS. Now to move on to a even cooler effect that can be made using the style property - moving stuff around.
blog comments powered by Disqus