詳解JavaScript如何操作元素屬性,樣式與類別名

DOM - Document Object Model

一整套操作文件流的屬性與方法

• 操作頁面的標籤(元素)
  操作標籤的增刪改查
  操作標籤的屬性(id, class, type, …)
  操作標籤的樣式
  …

• 認識一些內容
  -document：文件流，頁面，根節點，但不是元素(標籤)
  -html：承載所有標籤的最大的元素，根元素節點
  -head：專門承載目前頁面的說明標籤，這裡的內容一般不顯示在頁面上
  -body：專門承載目前頁面的顯示標籤，真實顯示在網頁的內容

取得元素

用變數儲存頁面中的某個或某些元素
取得元素的方法分為兩類
1、取得非常規元素

• html：document.documentElement
• head：document.head
• body：document.body

##2、取得常規元素

• 根據id 取得元素

  語法：document.getElementById
  # 傳回值：如果頁面上有id 對應的元素，那麼就是這個元素，如果沒有就是null
  

• 根據類別名稱取得元素

  語法：document.getElementsByClassName('元素類別名稱')
  傳回值：
  必然是一個偽數組# 如果頁面上有類別名稱對應的元素, 那麼有多少獲取多少, 放在偽數組內返回
  如果頁面上沒有類別名稱對應的元素, 那麼就是一個空的偽數組
  

• 根據標籤名稱取得元素

  語法：document.getElementsByTagName('標籤名稱')
  傳回值：
  必然是一個偽數組 如果頁面上有標籤名對應的元素,那麼有多少獲取多少, 放在偽數組內返回
  如果頁面上沒有標籤名對應的元素, 那麼就是一個空的偽數組
  

• 根據選擇器獲取一個標籤

  語法：document.querySelector('選擇器')
  傳回值：如果頁面上有選擇器對應的元素, 那麼傳回選擇器對應的第一個元素
  如果頁面上沒有選擇器對應的元素, 那麼就是null
  

• 根據選擇器取得一組標籤

  語法：document.querySelectorAll('選擇器')
  傳回值：
  必然是一個偽數組 如果頁面上有選擇器對應的元素, 有多少獲取多少, 放在一個偽數組內返回
  如果頁面上沒有選擇器對應的元素, 那麼就是一個空的偽陣列
  

操作元素樣式

• 在JS 內操作元素樣式有三種

  1、取得元素行內樣式(只能取得到行內樣式)
  2、取得元素非行內樣式(包含行內和非行內)
  3、設定元素的樣式(只能設定行內樣式)
  注意:涉及到帶有中劃線的樣式名的時候
  轉換成駝峰命名法
  使用陣列關聯語法
  

• # 取得元素行內樣式

  語法：元素.style.樣式名稱
  

console.log(ele.style.width)
console.log(ele.style.height) // 非行内样式
console.log(ele.style.fontSize)
console.log(ele.style['font-size'])

·取得元素非行內樣式
• 語法：window.getComputedStyle(要取得樣式的元素).樣式名稱
  

console.log(window.getComputedStyle(ele).width)
console.log(window.getComputedStyle(ele).height)
console.log(window.getComputedStyle(ele).fontSize)
console.log(window.getComputedStyle(ele)['background-color'])

#設定元素樣式(只能設定行內樣式)
• 語法：元素.style.樣式名稱= 樣式值
  

ele.style.backgroundColor = 'red'

操作元素類別名稱

目的：批次給變樣式

• className

  原生屬性的操作
  因為JS 內有一個關鍵子叫做class，為了避開改名叫做className
  注意：類別名稱的值是一個字串, 但是字串中可能包含多個類別名稱
  

• classList

  每個元素節點身上自帶一個屬性叫做classList
  是一個類似素組的資料結構，存放的是該元素的所有類別名稱
  增刪改查都是對classList 的操作，給出專用的api
  增：元素.classList.add(類別名稱)
  刪：元素.classList. remove(類別名稱)
  切換：元素.classList.toggle(類別名稱)
  -原先有就刪除，原先沒有就增加
  

相關推薦：【

JavaScript影片教學】

以上是詳解JavaScript如何操作元素屬性,樣式與類別名的詳細內容。更多資訊請關注PHP中文網其他相關文章！