改變元素的 CSS

在選到的元素後方加上 .style 即可改變 CSS 屬性。

  let element = document.getElementsByClassName('block')[0]
  element.style.background= 'yellow'

• 重點注意
  element.style.background-color= 'yellow'

在 js 裡會出現錯誤，因為 js 不能讀取 - 符號，可以改成這樣寫：

1. element.style['background-color']= 'yellow'
   或是
2. element.style.backgroundColor= 'yellow'

但是以上的寫法都會使專案的程式碼變得凌亂，所以建議將要改變的 css 屬性，獨自寫一個 class。

三、管理改變的 CSS

1. style.classList.add('') 新增 class

想要改變元素的 CSS 屬性，可以將要改變的結果單獨歸類成一個 Class，用 style.classList.add('')加上，便於管理程式碼。

範例：

HTML

<div class='block'>   
  Hello World～
</div>

js

<script>
        document.addEventListener('DOMContentLoaded',function(){
            let element = document.getElementsByClassName('block')[0]
            element.classList.add('red')
        })
</script>

CSS

<style>
       .red {
         background-color: red;
       }
</style>

2. style.classList.remove('') 移除 class

3. style.classList.toggle('') 開關

顧名思義，可以開開關關 class，即可刪除引數的 class 或新增引數內的class

應用：
在一個 button 上設定成開關，例如：

HTML：

 <div class='block'>
        Hello World～
    </div>
    <button class='btn'>
       變成紅色
    </button>

JS：

<script>
  document.addEventListener('DOMContentLoaded',function(){
      let element = document.getElementsByClassName('block')[0]
      var btn = document.getElementsByClassName('btn')[0]
      btn.addEventListener('click',function(){  
        element.classList.toggle('red')
      })
  })
</script>

畫面：


四、改變元素的 HTML

範例如下，接下來的結果皆是用範例當作選取元素：

<a><div>hello world</div></a>

let element = document.querySelector('a')

1. innerText

印出標籤內文字（僅文字）
element.innerText

log :hello world

element.innerText = 'hello rock'

log :hello rock

2. innerHTML

印出標籤內內容（文字與標籤）
element.innerHTML

log :<div>hello world</div>

element.innerHTML = <h1> hello rock </h1>

log :<h1> hello rock </h1>

3. outerHTML

印出標籤內容 （含標籤本身）
element.outerHTML

log :<a><div>hello world</div></a>

element.outerHTML = <pre> <h1>Hello rock</h1><pre>

log :<pre> <h1>Hello rock</h1><pre>

4. 插入與刪除元素 appendChild & removeChild

• appendChild 新增元素

在該元素下新增一個子元素。
HTML:

<div class='block'>
  <a>  
    Hello World～
  </a>
</div>

JS:

 let element = document.querySelector('.block')
 let a = document.querySelector('.block a')

 let item = document.createElement('div')
 
 item.innerText = 'Hello Rock'
 element.appendChild(item)

結果：

• removeChild 刪除元素

刪除指定的子元素。需要找到元素的 parent，對該元素的 parent 使用 removeChild


HTML:
```xml
<div class='block'>
  <a>  
    Hello World～
  </a>
</div>
```

JS:

```js
 let element = document.querySelector('.block')
 let a = document.querySelector('.block a')
 console.log(a)
 element.removeChild(a)
```

就可以成功將其子元素刪除

5. createTextNode

創建純文字節點。

let element = document.querySelector('.block')
let a = document.querySelector('.block a')
let mini = document.createTextNode('mini')
element.appendChild(mini)

結果：