Amaiko WebLog

How to change the CSS IDs using Javascript

There are multiple methods and techniques to change the CSS using Javascript which is going to say now. And the need for such techniques to add more dynamism to our pages.

How to use them

We can, for example, and easily start a DIV containing ads and make the user to the page controls to show or hide these ads or for example make the user choose the size of the largest lines of the existing or example, we can design our pages on the basis of its offer to 800 pixels and add a property enables the user to make the presentation Page 1024 pixels for users of screen-resolution bigger

An example of this

This, here is an example of that and to download the code from here
Science has developed this code under the license Public Domain any that you can do with it what you want.

Explain the code used in the example

Xhtml
We have established Div contains advertisements and we called adsbar Div another has remained on the page elements as we called Body Dva button to close the sidebar and made coordinated icon appears, and there shut down.

CSS
We have made the column width profile that will contain advertising represents one fifth of the screen and the rest of the page elements represent four fifths of the screen
JavaScript
What already was easy now come to part of this important and I will explain the code more attention.
The first thing we have established a function to hide the sidebar containing the ads and We called HideAds

function HideAds ()
(
document.getElementById ("adsbar"). style.visibility = "hidden"
document.getElementById ("body"). style.width = "100%"

)

As you can see us and Javascript capable browser with news that the Div Id styled adsbar We want to make the property a new value and visibility is hidden
In short what happened Hua default mode for this is the ID is

Visibility: visible

We make it to the browser

Visibility: hidden

And on the same vein, we can tell the browser for example, or change the color or what you want to know now how to hunt, hunting what you love.
But when you hide the sidebar of this page be around the rest of the screen represent four fifths of that will make Java script tells the browser to make the ID, which claims body width of 100% of the screen through it

document.getElementById ("body"). style.width = "100%"

And this way you can do what you want, and add a great dynamic to your page.
Image Todhip

And do not forget the example of the above here and to download the code from here