javascript - how to change stylesheets using 'onmouseover' and 'onclick' events? -
i want change style sheets permanently when function 'onclick' event called.. , 'onmouseover' event change style sheet long cursor stays on button..
in code, functions first 2 events work fine..but 'onclick' event's function doesn't work @ all.. can tell i'm doing wrong? n how can make work?
here's code:
<html> <head> <link id="theme" rel="stylesheet" type="text/css" href="css//main.css" > <script> function m1() { document.getelementbyid("theme").href= "style1.css"; } function o1(){ document.getelementbyid("theme").href= "css//main.css"; } function c1() { document.getelementbyid("theme").href="style1.css"; } </script> </head> <body> <div id="menu"> <ul id="br"> <li> select theme <ul id="dp"> <li><button id="b1" onmouseover="m1()" onmouseout="o1()" onclick="c1()" >style 1</button></li> <li><button id="b2">style 2</button></li> <li><button id="b3">style 3</button></li> </ul> </li> </ul> </div>
m1() , c1() load same stylesheet. when mouseover button , click, 2 events fired. i'm not sure order of fired events; however, should put console.log in each function see called.
function c1(){ document.getelementbyid("theme").href="style1.css"; console.log("on click"); }
Comments
Post a Comment