web-dev-qa-db-fra.com

Comment changer la propriété css en utilisant javascript

Je veux changer la propriété css de la classe en utilisant javascript. Ce que je veux réellement, c’est quand une div est survolée, une autre div devrait devenir visible.

Mon css est comme ..

.left, .right{
    margin:10px;
    float:left;
    border:1px solid red;
    height:60px;
    width:60px
}
.left:hover, .right:hover{
    border:1px solid blue;
}

.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;
}

Et le fichier HTML est comme ..

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

Lorsque hello1 div est survolé, bye1 div doit être visible et pareillement bye2 doit apparaître lorsque hello2 est survolé.

http://jsfiddle.net/rohan23dec/TqDe9/1/

javascriptcsshover
7
Rohan Das

Vous pouvez utiliser la propriété style pour cela. Par exemple, si vous voulez changer de frontière - 

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

de même pour la couleur - 

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

La meilleure chose à faire 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).

11
Ved

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 guillemets doubles d'un attribut HTML

Exemple 

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

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

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

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

Ceci est une expérience personnelle.  

3
Dipesh Parmar

Juste pour l'information, ceci peut être fait avec CSS seulement avec juste quelques modifications mineures HTML et CSS 

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/

0
xpy
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'
}
0
masoud