자바스크립트에서 마우스로 요소를 숨기는 방법-프런트엔드 Q&A-php.cn

JavaScript에서 마우스를 사용하여 요소를 숨기는 방법

집

웹 프론트엔드

프런트엔드 Q&A

자바스크립트에서 마우스로 요소를 숨기는 방법

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Feb 14, 2022 pm 04:58 PM

html javascript 프런트 엔드

방법: 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>

로그인 후 복사

출력 결과:

숨겨진 요소를 더블클릭해야 합니다.

자바스크립트에서 마우스로 요소를 숨기는 방법