2015-04-29 2 views
0

Я хочу постоянно менять таблицы стилей, когда вызывается функция для события «onclick» .. и событие «onmouseover» просто изменило бы таблицу стилей, если курсор остается на кнопке.Как изменить таблицы стилей, используя события 'onmouseover' и 'onclick'?

В моем коде , Функции для первых двух событий работают отлично, но функция события onclick не работает вообще. может кто-нибудь сказать, где я делаю неправильно? n как я могу заставить его работать?

вот код:

<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>  

ответ

0

m1() и c1() нагрузить ту же таблицу стилей. Когда вы наведете курсор на кнопку и щелкните, оба события будут запущены. Я не уверен насчет порядка уволенных событий; однако вы должны поместить console.log в каждую функцию, чтобы увидеть, что вызвано.

function c1(){ 
    document.getElementById("theme").href="style1.css"; 
    console.log("On Click");  
}