[第七週] 改變元素


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






你可能感興趣的文章

如何使用 Python 設計一個簡單的計算機 入門教學

如何使用 Python 設計一個簡單的計算機 入門教學

DOM 節點 相關屬性

DOM 節點 相關屬性

EDA工作站建置(CENTOS 8)

EDA工作站建置(CENTOS 8)






留言討論