Comment changer une propriété CSS en utilisant JavaScript

Question

Je veux changer une propriété CSS d'une classe en utilisant JavaScript. Ce que je veux en fait, c'est que lorsqu'un

est survolé, un autre

devrait devenir visible.

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

  Bonjour

    Au revoir

    Au revoir1

  Bonjour2

Quand le div hello1 est survolé, le div bye1 devrait être visible et de même bye2 devrait apparaître lorsque hello2 est survolé.

Answer 1

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

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

de même pour la couleur -

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

Le mieux est de définir une classe et de faire cela -

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

(Les artefacts des navigateurs doivent être pris en compte en conséquence).

Answer 2

// sélectionner un élément du DOM en utilisant *const*
const sample = document.getElementById("myid"); // en utilisant const
// ou vous pouvez utiliser *var*
var sample = document.getElementById("myid"); // en utilisant var

// changer le style css
sample.style.color = 'red'; // Change la couleur, ajoute une propriété de style.
// ou (non recommandé)
sample.style = "color: red"; // Remplace toutes les propriétés de style. NON RECOMMANDÉ

Answer 3

Considérez l'exemple suivant : Si vous souhaitez modifier une seule propriété CSS (par exemple, la couleur en 'bleu'), alors l'instruction ci-dessous fonctionne bien.

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

Mais, pour changer plusieurs propriétés, le moyen le plus robuste est d'utiliser Object.assign() ou, l'opérateur de propagation d'objet {...};

Voir ci-dessous :

const ele=document.getElementById("ele_id");
const custom_style={
    display: "block",
    color: "red"
}

//Object.assign():
Object.assign(ele.style,custom_style);

L'opérateur de propagation fonctionne de manière similaire. La syntaxe est un peu différente, c'est tout.

Answer 4

Utilisez document.getElementsByClassName('className').style = votre_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

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

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

Ceci est une expérience personnelle.

Answer 5

Juste pour l'info, cela peut être fait avec du CSS uniquement avec juste quelques changements mineurs en HTML et en CSS

HTML:

    Bonjour

    Bonjour2

           Au revoir

           Au revoir1

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/