how to call or invoke a css rule using javascript?

Question

generally css rules applies automatically when file is loaded, but we can forcefully make some changes to the existing css rule by using javascript after some events like onclick or onmouseover or onload etc,. can any body tell me how do we do that in javascript. Thanks in advance

Answer 1

Here's some examples...

onmouseover =

"doBgColorChange(this, 'yellow');"

onmouseout =

"doBgColorChange(this, 'white');" >

For the demo, most change events are registered to buttons; however, any events

could be used to fire calls to the functions used here. Note that the style

properties used in the JavaScript functions are named, using camel notation;

this is required by JavaScript, since the hyphenated names would confuse the

JavaScript interpreter (font-family would be read by the JavaScript intepreter

as "font minus family").

level 2 heading for color change

this paragraph can have its font family reset by class

another level 2 heading for color change

another paragraph for font family resets by class

this paragraph will not have its font family affected by changes to the pFont class, but can be manipulated by its id

type="button"

value="change color of H2 elements"

onclick = "doH2ColorChange();" />


type="button"

value=" change font-family of p elements with pFont class"

onclick = "doPFontFamilyChange();" />


type="button"

value="change size of p element with id notPFont"

onclick = "doNotPFontSizeChange();" />

Answer 2

CSS is the final for layout. Javascript is merely too unreliable and in my view ought to in basic terms be used for much less considerable issues. i exploit it on my website for a pair of issues, like changing the visibility of a layer to make a popup help menu - yet even then it is considerable to have an option in case the Javascript would not artwork. anyplace achievable i exploit Hypertext Preprocessor nonetheless, to illustrate for passwords or varieties.

Answer 3

Visit http://www.w3shools.com. They have a ton of tutorials on all things HTML include javascript and CSS. They also have plenty of examples so you should be able to find what you need pretty quickley. I would start by finding the CSS codes your looking to modify. That will get you started on what javascript controls are available.



hope this helps.

Answer 4

You can use element.style and element.className to change CSS with Javascript.



Example:







Change link class



Clicking on that link will change it's class to "yellow-link".



You can read more about it here: http://dhtmlkitchen.com/learn/js/setstyle/index5.jsp

Answer 5

var whatever=document.getElementById("something");

var what_it_is=whatever.style;