Javascript Girl
  1. Javascript Girl
  3. Comment puis-je modifier la propriété CSS "afficher" en javascript
Intereting Posts
Comment importer toutes les tâches à partir d'un autre fichier de gulp.js Effectuer des débuts dans React.js JavaScript: clone une fonction Pourquoi mes appels XHR sont-ils en attente de retour Sammyjs paramètres facultatifs Identificateur unique pour les éléments HTML La création Javascript / jQuery DOM est-elle sûre jusqu'à ce qu'elle soit ajoutée au document? Existe-t-il une différence majeure entre innerHTML et l'utilisation de createTextNode pour compléter une portée? Méthodes statiques et services angulaires 2 JavaScript ES6 Comment accéder au magasin de certificats Windows sous javascript? JQuery Multidimensional Array (clé dynamique) – Impossible de définir une propriété de indéfini Supprimer l'attribut "coché" de la case à cocher Encodage url php javascript Comment faire glisser le haut de la page JQuery mobile XHTML ne valera pas && et <dans une fonction JavaScript

Comment puis-je modifier la propriété CSS "afficher" en javascript

Comment puis-je changer l' display propriété CSS, en JavaScript, de l' display:none pour display:normal pour ces divs? 

 #hide_0 { display:none } #hide_1 { display:none } #hide_2 { display:none } #hide_3 { display:none } #hide_4 { display:none } #hide_5 { display:none }

Un seul à la fois. Je dois afficher un et cacher le reste.

Ce que j'ai utilisé: 

 var persistent_element='hide_1'; function link_update(link_display) { var local_element; local_element=document.getElementById(persistent_element); local_element.style.display='none'; local_element=document.getElementById(link_display); local_element.style.display='block'; persistent_element=link_display; }

Comment je l'ai connecté: m4 est un minifié – se connecte oncliquer à ces méthodes 

 m4('l1',function {return link_update(hide_1);}); m4('l2',function {return link_update(hide_2);}); m4('l3',function {return link_update(hide_3);}); m4('l4',function {return link_update(hide_4);}); m4('l5',function {return link_update(hide_5);}); m4('l6',function {return link_update(hide_6);});

Pour utiliser javascript pour modifier le style, vous pouvez le faire comme ceci: 

 // hide an element document.getElementById("hide_0").style.display = "none"; // show a block element document.getElementById("hide_1").style.display = "block"; // to go back to the default or CSS specified value document.getElementById("hide_2").style.display = "";

Donc, si vous vouliez cacher tout et en montrer un, vous pouvez le faire avec cette fonction: 

 function showOneHideOthers(base, len, numToShow) { // objects must have ids like base_0, base_1, etc... for (var i = 0; i < len; i++) { if (i != numToShow) { document.getElementById(base+i).style.display = "none"; } } document.getElementById(base+numToShow).style.display = "block"; } showOneHideOther("hide_", 6, 2);

PS normal n'est pas une valeur valide pour la propriété d'affichage. Les valeurs typiques sont block , none and inline et il y en a d'autres comme inline-block , table , etc.

Votre question n'est pas particulièrement claire, mais l'essence de ce que vous voulez faire est simple. Vous pouvez obtenir une référence à un élément DOM qui possède un id utilisant getElementById et que vous pouvez modifier la propriété d' display : 

 document.getElementById("hide_0").style.display = "none"; //or "block"

Cependant, vous avez plusieurs éléments que vous souhaitez cacher / afficher (je ne suis pas sûr de le faire), il peut être plus facile d'utiliser une méthode différente pour sélectionner les éléments (tels que getElementsByTagName ou getElementsByClassName , mais Cela dépend de votre HTML et de ce que vous essayez réellement de faire).

Vous pouvez définir une propriété css sur un élément en utilisant la méthode de style. 

 div.style.display = '';