Comment changer la propriété css en utilisant javascript

Vous pouvez utiliser style propriété de style pour cela. Par exemple, si vous voulez changer de bordure –

 document.elm.style.border = "3px solid #FF0000"; 

De même pour la couleur –

  document.getElementById("p2").style.color="blue"; 

La meilleure chose est de définir une classe et de le faire –

document.getElementById("p2").className = "classname";

(Les artefacts Cross Browser doivent être considérés en conséquence).

 var hello = $('.right') // or var hello = document.getElementByClassName('right') var bye = $('.right1') hello.onmouseover = function() { bye.style.visibility = 'visible' } hello.onmouseout = function() { bye.style.visibility = 'hidden' } 

Utilisez document.getElementsByClassName('className').style = your_style .

 var d = document.getElementsByClassName("left1"); d.className = d.className + " otherclass"; 

Utilisez des guillemets simples pour les chaînes JS contenues dans les quotes-clés d'un attribut html

Exemple

 <div class="somelclass"></div> 

Puis document.getElementsByClassName('someclass').style = "NewclassName";

 <div class='someclass'></div> 

Puis document.getElementsByClassName("someclass").style = "NewclassName";

C'est une expérience personnelle.

Avec Jquery:
. Planer (…)

Alors faites :

 $(".left").hover(function(){ $(".left1").toggle() } ); $(".right").hover(function(){ $(".right1").toggle()} ); 

Aller à jsFiddle pour voir en action

Juste pour l'information, cela peut être fait avec CSS uniquement avec des changements HTML et CSS mineurs

HTML:

 <div class="left"> Hello </div> <div class="right"> Hello2 </div> <div class="center"> <div class="left1"> Bye </div> <div class="right1"> Bye1 </div> </div> 

CSS:

 .left, .right{ margin:10px; float:left; border:1px solid red; height:60px; width:60px } .left:hover, .right:hover{ border:1px solid blue; } .right{ float :right; } .center{ float:left; height:60px; width:160px } .center .left1, .center .right1{ margin:10px; float:left; border:1px solid green; height:60px; width:58px; display:none; } .left:hover ~ .center .left1 { display:block; } .right:hover ~ .center .right1 { display:block; } 

Et la DEMO: http://jsfiddle.net/pavloschris/y8LKM/

C'est vraiment simple en utilisant jQuery.

Par exemple:

 $(".left").mouseover(function(){$(".left1").show()}); $(".left").mouseout(function(){$(".left1").hide()}); 

J'ai mis à jour votre violon: http://jsfiddle.net/TqDe9/2/