javascript怎麼用滑鼠隱藏元素-前端問答-PHP中文網

javascript怎麼用滑鼠隱藏元素

WBOY

發布： 2022-02-14 16:58:29

原創

2345 人瀏覽過

方法：1、利用「元素物件.click(function(){隱藏元素物件.hide();})」語句設定滑鼠點選隱藏元素；2、利用「元素物件.dblclick(function( ){隱藏元素物件.hide();})」設定滑鼠雙擊隱藏元素。

javascript怎麼用滑鼠隱藏元素

本教學操作環境：windows10系統、javascript1.8.5版、Dell G3電腦。

javascript怎麼能用滑鼠隱藏元素

在 JavaScript 中，滑鼠事件是Web 開發中最常用的事件類型，滑鼠事件類型詳細說明如下表所示：

javascript怎麼用滑鼠隱藏元素

hide()方法用於如果被選取的元素已被顯示，則隱藏該元素。

語法為：

$(selector).hide(speed,callback)

登入後複製

speed

可選。規定元素從可見到隱藏的速度。預設為 "0"。

可能的值：

毫秒（例如1500）

"slow"

"normal"

"fast"

在設定速度的情況下，元素從可見到隱藏的過程中，會逐漸地改變其高度、寬度、外邊距、內邊距和透明度。

callback

可選。 hide 函數執行完後，要執行的函數。

範例如下：

<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>

登入後複製

輸出結果：

javascript怎麼用滑鼠隱藏元素

#範例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>

登入後複製

輸出結果：

需要雙擊隱藏元素。

javascript怎麼用滑鼠隱藏元素