[第七週] 改變元素


改變元素的 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






你可能感興趣的文章

[Note] webpack5 problem: Environment Variable (.env)

[Note] webpack5 problem: Environment Variable (.env)

【Day 3】Docker Container(容器)與 Volume(數據卷)

【Day 3】Docker Container(容器)與 Volume(數據卷)

D35_W4 HW1 + HW2

D35_W4 HW1 + HW2






留言討論