자바스크립트에서 마우스로 요소를 숨기는 방법
- WBOY원래의
- 2022-02-14 16:58:292302검색
방법: 1. "Element object.click(function(){Hide element object.hide();})" 문을 사용하여 마우스 클릭을 설정하여 요소를 숨깁니다. 2. "Element object.dblclick(function)을 사용합니다. (){Hide element Object.hide();})"는 마우스를 두 번 클릭하면 요소가 숨겨지도록 설정합니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
JavaScript에서 마우스를 사용하여 요소를 숨기는 방법
JavaScript에서 마우스 이벤트는 웹 개발에서 가장 일반적으로 사용되는 이벤트 유형입니다. 마우스 이벤트 유형은 다음 표에 자세히 설명되어 있습니다.
hide() 메서드는 선택한 경우 사용됩니다. 요소가 이미 표시되어 있으면 요소를 숨깁니다.
구문은
$(selector).hide(speed,callback)
speed
선택 사항입니다. 요소가 표시에서 숨김으로 전환되는 속도를 지정합니다. 기본값은 "0"입니다.
가능한 값:
ms(예: 1500)
"slow"
"normal"
"fast"
속도가 설정되면 요소의 높이, 너비, 여백이 점차적으로 표시에서 숨김으로 변경됩니다. , 패딩 및 투명도.
콜백
선택사항. 숨기기 기능이 실행된 후 실행될 기능입니다.
예제는 다음과 같습니다.
<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>출력 결과:
예제 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>출력 결과:
숨겨진 요소를 더블클릭해야 합니다.
관련 추천: 자바스크립트 학습 튜토리얼
위 내용은 자바스크립트에서 마우스로 요소를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!