Recherche chaud: apres hysterectomie diminution hormone Quest-ce que SelectShift plantes grotte Quest ce une analyse budgetaire? croisiere costa mediterranee comment peut comprendre la musique comment faire du laiton antique connaissance draco malfoy
Index Loisirs Santé Technologie

Cachant un élément DIV en JavaScript

Publié:2012-04-21Source: général
Advertisement

Cachant un élément DIV en JavaScript

Masquer les éléments d'un site Web est un excellent moyen d'ajouter des effets spéciaux. Par exemple, si vous placez une image dans un élément DIV, vous pouvez créer un bouton pour basculer la visibilité de l'image. Un DIV HTML est un élément spécial est une ouverture et la fermeture de DIV. Tout est dans ces deux balises fera partie du bloc DIV. Si vous utilisez JavaScript afin de basculer la visibilité de la DIV, également alternarás visibilité de tous les éléments qui sont dans le bloc.

Niveau de difficulté:

Modérément facile

Instructions

1 Ouvrez l'ordinateur portable et coller le code HTML dans un nouveau document: <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Tester Div </ title> < / head> <body> <div id = "div1"> Inside div1 </ div> <input id = "Button1" type = "button" value = "Cliquez pour activer la visibilité" onclick = "retourner ToggleDiv ()" /> </ body> </ html> Les trois premières lignes de code après la balise de début <body> (corps) créer un bloc DIV. L'ID (identification) est div1. Le code JavaScript peut identifier ce bloc DIV par cet ID. Notez que le texte "de div1 Inside" (au sein div1) apparaît entre le bloc DIV balises d'ouverture et de clôture. La ligne de code qui sont ensuite situé bloc DIV crée un bouton que vous pouvez utiliser pour tester la fonction de commutation. Lorsque vous cliquez sur le bouton active une fonction JavaScript appelée ToggleDIV. La fonction affiche ou masque la DIV.

2 Ajoutez le code JavaScript, après la section du titre du document HTML: <script language = "javascript" type = "text / javascript"> var visibilityState = "visible"; ToggleDIV fonction () {var divBlock = document.getElementById ("div1"); si (visibilityState == "visible") visibilityState = "hidden"; visibilityState autre = "visible"; divBlock.style.visibility = visibilityState; } </ Script> Cette fonction est activée lorsque les utilisateurs cliquent sur le bouton décrit dans l'étape précédente. Chaque fois que la fonction est exécutée, la valeur de alterne entre "visible" (visible) et «caché» (caché) "visibilityState" (statut de visibilité). La fonction définit la propriété de visibilité dans la DIV stockée dans la valeur "visibilityState".

3 Enregistrez le document HTML et ouvrez le dans votre navigateur. Les mots "Inside div1» (dans le div1) apparaissent au-dessus du bouton «Cliquer ici pour basculer Visibilité" (cliquez pour basculer la visibilité).

4 Cliquez sur le bouton. La fonction Javascript exploite et cache la DIV qui contient le texte. Cliquez à nouveau sur le bouton pour faire de la DIV et le texte deviennent visibles. Le texte apparaît et disparaît comme vous continuez à cliquer sur le bouton.

Conseils et avertissements

Note que l'identification est div1 DIV. La première ligne de la fonction JavaScript utilise également div1. Div1 changé à la valeur que vous voulez. Si vous modifiez cette valeur, assurez-vous de le faire dans tous les lieux où il apparaît dans le document HTML.

Dans cet exemple, la DIV contient un texte simple. Vous pouvez placer d'autres éléments HTML tels que des boutons, des images et des formes, dans le bloc DIV. Tous les éléments qui sont dans la DIV apparaissent et disparaissent lorsque les utilisateurs cliquent sur le bouton à bascule.

[Rédacteur: Admin]
Je vous imagine comme

Articles recommandés

Cliquez Top Ranking