您好,登錄后才能下訂單哦!
這篇文章主要介紹了javascript如何用鼠標隱藏元素的相關知識,內容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇javascript如何用鼠標隱藏元素文章都會有所收獲,下面我們一起來看看吧。
方法:1、利用“元素對象.click(function(){隱藏元素對象.hide();})”語句設置鼠標點擊隱藏元素;2、利用“元素對象.dblclick(function(){隱藏元素對象.hide();})”設置鼠標雙擊隱藏元素。
本教程操作環境:windows10系統、javascript1.8.5版、Dell G3電腦。
在 JavaScript 中,鼠標事件是 Web 開發中最常用的事件類型,鼠標事件類型詳細說明如下表所示:
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>
輸出結果:
示例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如何用鼠標隱藏元素”這篇文章的內容就介紹到這里,感謝各位的閱讀!相信大家對“javascript如何用鼠標隱藏元素”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。