web-dev-qa-db-fra.com

Comment changer la visibilité d'une balise <div> en utilisant javascript dans la même page?

Je travaille sur un simple code javascript.

En fonction de la condition, je devrais changer la visibilité du tag de caché à visible.

Je devrais utiliser javascript seul. Pas de jQuery ou AJAX. Toute idée ou suggestion s'il vous plaît.

javascripthtmlcsscss3css-transitions
9
arunpandiyarajhen

En utilisant l'attribut visibility:

Montrez le div avec id="yourID":

document.getElementById("yourID").style.visibility = "visible";

Pour le cacher:

document.getElementById("main").style.visibility = "hidden";

En utilisant l'attribut display:

Spectacle:

document.getElementById("yourID").style.display= "block";

Cacher:

document.getElementById("yourID").style.display= "none";
30
mornaner
<div id="contentDiv">
    This is the content .
</div>

si vous voulez changer la visibilité de div avec id = "contentDiv" en utilisant javascript, vous pouvez le faire avec ..

var eleDiv = document.getElementById("contentDiv");


    // based on condition you can change visibility
if(eleDiv.style.display == "block") {
        eleDiv.style.display = "none";
}
else {
    eleDiv .style.display = "block";
}

J'espère que ce code vous aidera ........

4
Hitesh Bavaliya

Bien qu'il soit demandé de ne pas le faire avec jquery, mais cela peut être fait comme: $('.my_div_tag_id').css('visibility','hidden');

2
uutsav

Appelez cette fonction lorsque vous souhaitez afficher le div. Écrivez ces conditions dans votre segment/cas.

function showDiv() {
    document.getElementById('divId').style.display = 'block';   //  or 'inline'
}

Faites-moi part de vos commentaires.

1
2plus

Visible:

var elem = document.getElementById("IdOfEl");
elem.style.display="block";

Cacher:

var elem = document.getElementById("IdOfEl");
elem.style.display="none";
1
Anton Baksheiev

Une façon de le faire serait de créer la logique de contrôle en JavaScript et de l'ajouter dans la balise "script" du document. Appliquez ensuite la logique pour masquer/afficher l'élément "div".

J'ai créé un exemple de document HTML basé sur "Un premier document HTML" à la page 16 (Musciano et Kennedy, 2002). Il comprend une balise "div" dans la balise "body" près du haut. La fonction ShowAndHide a été incluse dans la balise "script" dans la balise "head". Une application de ShowAndHide peut être trouvée dans l'autre balise "script" dans la balise "body" près de la fin.

Vous pouvez trouver l'exemple HTML en tant que pièce jointe au document PDF "" Afficher et masquer la logique de contrôle: inspiré par une question lors du débordement de la pile ".

Référence

Musciano, C. et Kennedy, B. (2002). HTML et XHTML: The Definitive Guide, Fifth Edition. Sebastopol, Californie: O’Reilly Media Inc.

0
John Frederick Chionglo