---
# System prepended metadata

title: jsFadeIn / jsFadeOut<br/>jsAddClass / jsRemoveClass<br/>jsParents
tags: [HyUI4.0]

---

---
type: slide
---

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

---

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

**jsFadeIn / jsFadeOut**
控制物件FadeIn/FadeOut
```javascript=
jsFadeIn(element)
jsFadeOut(element)
```

使用方式很簡單 element 帶入元件即可
```javascript=
let btn = document.querySelector('.btn')
let obj = document.querySelector('.obj')
btn.addEventListener('click',function(){
    jsFadeIn(obj)
    jsFadeOut(obj)
})
```

---

**jsAddClass / jsRemoveClass**
用來增加或移除class
```javascript=
jsAddClass(element, className)
jsRemoveClass(element, className)
```

```javascript=
let box = document.querySelector('.box')
btn.addEventListener('click',function(){
    jsAddClass(box, 'acitve')
    jsRemoveClass(box, 'acitve')
})
```
或直接使用原生JS
```javascript=
box.classList.add('active')
box.classList.remove('active')
```

---

**jsParents**
```javascript=
jsParents(element, className)
```
jsParents 可搜尋物件父層的tag或是class，單筆可以直接使用
多筆需要用forEach去調用每一個parents
目前只能抓class和tag(class不需要加 . )，無法抓取id
```javascript=
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>
