Maison >interface Web >Questions et réponses frontales >Comment masquer des éléments avec la souris en javascript
Méthode : 1. Utilisez l'instruction "Element object.click(function(){Hide element object.hide();})" pour définir le clic de la souris pour masquer l'élément ; 2. Utilisez "Element object.dblclick(function) (){Masquer l'élément Object.hide();})" définit l'élément à masquer en double-cliquant sur la souris.
L'environnement d'exploitation de ce tutoriel : système Windows 10, JavaScript version 1.8.5, ordinateur Dell G3.
En JavaScript, les événements de souris sont les types d'événements les plus couramment utilisés dans le développement Web. Les types d'événements de souris sont détaillés dans le tableau suivant :
la méthode hide() est. utilisé si sélectionné L'élément est déjà affiché, puis masquer l'élément.
La syntaxe est :
$(selector).hide(speed,callback)
speed
Facultatif. Spécifie la rapidité avec laquelle un élément passe de visible à masqué. La valeur par défaut est "0".
Valeurs possibles :
ms (par exemple 1500)
"lent"
"normal"
"rapide"
Avec la vitesse définie, l'élément passera progressivement de visible à caché. Sa hauteur, sa largeur, ses marges. , le remplissage et la transparence.
rappel
facultatif. La fonction à exécuter après l'exécution de la fonction de masquage.
L'exemple est le suivant :
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn").click(function(){
$(".btn").hide();
});
});
</script>
<style>
.btn{
width:100px;
height:100px;
background:pink;
}
</style>
</head>
<body>
<div class="btn">这是一个要被隐藏的元素</div>
</body>
</html>Résultat de sortie :
Exemple 2 :
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn").dblclick(function(){
$(".btn").hide();
});
});
</script>
<style>
.btn{
width:100px;
height:100px;
background:pink;
}
</style>
</head>
<body>
<div class="btn">这是一个要被隐藏的元素</div>
</body>
</html>Résultat de sortie :
Vous devez double-cliquer sur l'élément masqué.
Recommandations associées : Tutoriel d'apprentissage 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!