[第七週] 改變元素


改變元素的 CSS

element.style.要更改的東西

例如:

改變元素的 Class

增加 class
  1. 先在 style標籤裡寫一個 active 的 class
  2. 把 active 這個class 加進去指定的元素裡
    element.classList.add('active')
移除 class

element.classList.remove('class 名稱')

element.classList.toggle('class 名稱')
toggle就像一個開關,原本 off 會變 on,原本 on 會變 off

改變內容

  • innerText
    選取到標籤內的所有文字

    也可以用 innerText 改變本來的內容
  • innerHTML
    選取到標籤內的文字及 Html 標籤,但不包括自己本身的標籤
  • outerHTML
    選取到標籤內的文字及 Html 標籤,包括自己本身的標籤

    用 outerHTML 改變本來的內容

刪除與插入元素

  • 刪除元素 removeChild
    先找到要刪除元素的 parent,就是找到他的上一層元素,再執行removeChild

  • 新增元素 appendChild
    先新增元素 .createElement('欲新增的標籤')
    再執行 appendChild
    使用 innerText 可以改變新增元素的內容

    如果不想新增元素,只是想新增文字,可以用.createTextNode

#removeChild #appendChild #createElement #createTextNode






Related Posts

《鳥哥 Linux 私房菜:基礎篇》Chapter 07 - Linux 磁碟與檔案系統管理

《鳥哥 Linux 私房菜:基礎篇》Chapter 07 - Linux 磁碟與檔案系統管理

[ 學習筆記系列 ] 很基礎的 JavaScript 入門 (二) - ES6 語法與 Module

[ 學習筆記系列 ] 很基礎的 JavaScript 入門 (二) - ES6 語法與 Module

來寫個氣象機器人吧!(Part 2)

來寫個氣象機器人吧!(Part 2)




Sponsored



Comments