在JS也能夠控制CSS，對節點新增CSS或是觸發某些事件就將CSS刪除或更換等等，今天就來看是如何做修改的吧!

style

基本上就是替元素新增inline-tyle，那有有兩種方式可以使用

<div class="ck">
  hello
</div>

let ck = document.querySelector('.ck')

ck.style.color = 'red' 
// or
ck.style.cssText = 'color: red; font-size: 20px;'

cssText比較像是可以一次新增多個css樣式!

setProperty

一樣可以新增css樣式，但語法不太一樣且可以設定層級，基本上優先權可以設定important，預設是空值可以不寫。

想更改樣式的節點.style.setProperty(樣式名稱,樣式值,優先權)

<div class="ck">
  hello
</div>

let ck = document.querySelector('.ck')
ck.style.setProperty('color', 'red')

主要麻煩的是因為setProperty針對的是節點的style，所以前面一定要先使用.style這個API(那倒不如還是乖該用style還比較快XD

classList

這邊會介紹新增class是因為現在有許多前端框架例如Bootstrap、tailwindcss都是以新增class來更改css樣式。通常會搭配add、remove、toggle這三個API來做使用。

<div class="ck text-gray-600 mr-auto">
  hello
</div>

如果沒有指定，會顯示出該節點所有的class

let ck = document.querySelector('.ck')
console.log(ck.classList) // "ck"、"text-gray-600"、"mr-auto"

add

新增css樣式，且也可以一次指定多個

let ck = document.querySelector('.ck')
ck.classList.add("text-center")
ck.classList.add("text-blue-500","font-bold")

remove

移除css樣式，也可以同時指定多個

let ck = document.querySelector('.ck')
ck.classList.remove("mr-auto")

toggle

切換css樣式，可能會使用到的情景會是當某顆button按下後會將區塊顏色顯示出來等等。

let ck = document.querySelector('.ck')
ck.classList.toggle("bg-blue-300")

className

與classList一樣可以一次新增多個，如果不指定可以顯示此節點所有的class，最大的不同在於，會直接覆蓋掉原有的class!

<div class="ck text-gray-600 mr-auto">
  hello
</div>

let ck = document.querySelector('.ck')
ck.className == 'gg'
console.log(ck.className) // "gg"

setAttribute

setAttribute比較像是新增屬性!而不是css樣式，舉例像是input會有許多屬性像是，type、name、value等等都可以使用此API設定

<input class="ck">

let ck = document.querySelector('.ck')
ck.setAttribute("type","button")
ck.setAttribute("value","button")

removeAttribute

就是刪除屬性的意思，如果有一個按鈕原本設定為disabled，想解除disabled就可以使用此API

<input class="ck" disabled>

let ck = document.querySelector('.ck')
ck.setAttribute("type","button")
ck.setAttribute("value","button")
ck.removeAttribute("disabled")

今天就介紹到這邊，大家明天見!