---
type: slide
---

# jsFadeIn / jsFadeOut<br/>jsAddClass / jsRemoveClass<br/>jsParents
###### tags:`HyUI4.0`

---

目前有寫幾個可以快速使用的小功能

**jsFadeIn / jsFadeOut**
控制物件FadeIn/FadeOut

jsFadeIn(element)
jsFadeOut(element)

使用方式很簡單 element 帶入元件即可

let btn = document.querySelector('.btn')
let obj = document.querySelector('.obj')
btn.addEventListener('click',function(){
    jsFadeIn(obj)
    jsFadeOut(obj)
})

---

**jsAddClass / jsRemoveClass**
用來增加或移除class

jsAddClass(element, className)
jsRemoveClass(element, className)

let box = document.querySelector('.box')
btn.addEventListener('click',function(){
    jsAddClass(box, 'acitve')
    jsRemoveClass(box, 'acitve')
})

或直接使用原生JS

box.classList.add('active')
box.classList.remove('active')

---

**jsParents**

jsParents(element, className)

jsParents 可搜尋物件父層的tag或是class，單筆可以直接使用
多筆需要用forEach去調用每一個parents
目前只能抓class和tag(class不需要加 . )，無法抓取id

let box = document.querySelector('.box')
btn.addEventListener('click',function(){
    //class
    jsParents(btn, 'parent').classList.add('active')
    
    //tag
    jsParents(btn, 'span').classList.add('active')
    
    //多筆parents
    jsParents(btn, 'parents').forEach(item=>{
        item.classList.add('active')
    })
})

<style>
.reveal h1{
font-size:2em;
}
.reveal h1,.reveal h2 {
color:#c9f2ff;
}
.reveal{
font-size:26px;
}
</style>