Comment masquer la valeur d'un élément en javascript-Questions et réponses frontales-php.cn

Comment masquer la valeur d'un élément en javascript

藏色散人

Libérer： 2023-01-07 11:44:01

original

3439 Les gens l'ont consulté

Comment masquer les valeurs des éléments en JavaScript : 1. Définissez l'affichage dans l'attribut de style de l'élément, avec des instructions telles que "t.style.display= 'none';" 2. Définissez la visibilité dans l'attribut de style de l'élément. .

Comment masquer la valeur d'un élément en javascript

L'environnement d'exploitation de cet article : système Windows7, javascript version 1.8.5, ordinateur DELL G3

javascript pour masquer et afficher des éléments

Il existe deux façons de masquer et afficher les éléments de la page :

Méthode 1 : Définir l'affichage dans l'attribut style de l'élément

var t = document.getElementById(&#39;test&#39;);//选取id为test的元素
t.style.display = &#39;none&#39;;	// 隐藏选择的元素
t.style.display = &#39;block&#39;;	// 以块级样式显示

Copier après la connexion

Méthode 2 : Définir la visibilité dans l'attribut style de l'élément

var t = document.getElementById(&#39;test&#39;);
t.style.visibility = &#39;hidden&#39;;	// 隐藏元素
t.style.visibility = &#39;visible&#39;;	// 显示元素

Copier après la connexion

La différence entre ces deux méthodes est : définir l'affichage cacher n'occupe pas la position d'origine, mais par visibilité Après avoir été masqué, la position de l'élément est toujours occupée.
L'effet est le suivant :
Comment masquer la valeur dun élément en javascript

La première cache le devant

Comment masquer la valeur dun élément en javascript

sans occuper la position d'origine après s'être cachée

Comment masquer la valeur dun élément en javascript

La deuxième cache le devant

Comment masquer la valeur dun élément en javascript

Après étant ainsi caché, il occupe toujours sa position d'origine.

Le code complet est le suivant :

<head>
    <script type="text/javascript">
        function fn1(){
            var t = document.getElementById(&#39;test&#39;);
            if(t.style.display === &#39;none&#39;) {
                t.style.display = &#39;block&#39;;// 以块级元素显示
            } else {
                t.style.display = &#39;none&#39;; // 隐藏
            }
        }

        function fn2(){
            var t = document.getElementById(&#39;test&#39;);
            if(t.style.visibility === &#39;hidden&#39;) {
                t.style.visibility = &#39;visible&#39;;
            } else {
                t.style.visibility = &#39;hidden&#39;;
            }
        }
    </script>
</head>

<body>
	<p id="test" style="border: solid 1px #e81515; width:500px;">
	    这是一个将要隐藏的p。<br>
	    这是一个将要隐藏的p。<br>
	    这是一个将要隐藏的p。<br>
	    这是一个将要隐藏的p。<br>
	</p>
	<button onclick="fn1()">第一种方式</button>
	<button onclick="fn2()">第二种方式</button>
</body>

Copier après la connexion

Apprentissage recommandé : "Tutoriel avancé javascript"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!