Vanilla JS 效果方法

過去，我經常使用 jQuery，我喜歡 jQuery 的一點是它透過簡單且輕量級的語法提供了許多有用的方法。最常用的 jQuery 方法之一是效果方法 - 用於為網站建立動畫效果。

例如：

• 隱藏() / 顯示()
• 切換()
• 淡入()
• 淡出()
• ...

W3schools 列出了所有 JQuery 效果方法

但現在隨著大量 JS 函式庫的成長，jQuery 似乎過時了，在某些專案中，開發人員必須用純 JS 取代 jQuery 程式碼。

輕鬆建立與 hide() / show() 相同的函數，只需編輯顯示樣式

element.style.display = 'block' // or none

但對於更複雜的效果，例如 fadeIn()/fadeOut()，我們需要寫更多程式碼。

在 vanilla JS 中寫效果方法的另一個問題是冗長的語法。你可以用 jQuery 方法看到：

$(".myClass").slideDown();

它非常易讀且直觀，你可以使用jQuery選擇器找到元素，然後呼叫slideDown方法作為該元素的方法。
如果您之前定義了 slipToggle 方法，則程式碼在 vanilla JS 中實現相同的功能：

const element = document.querySelector(".myClass");
slideToggle(element);

您查詢元素，然後將其傳遞給 SlideToggle() 函數，它似乎比使用 jQuery 的範例不太原生且可讀性較差。

這裡的技巧是使用 HTMLElement.prototype 新增一個方法到 HTML 元素，你可以使用effect函數作為 HTML 元素的方法。為了簡單起見，我們定義 hide() 方法：

HTMLElement.prototype.hide = function() {
  this.style.display = 'none'
}

document.querySelector(".myClass").hide()

為了重用，我在這裡創建了一些普通的 JS 方法來實現效果。只需將其放在程式碼庫中的某個位置並將其用作 HTML 元素的本機方法即可。

以上是Vanilla JS 效果方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！