修改元素屬性值

既然在上一篇中我們已經可以拿到元素的屬性值了，那下一步就是如何修改它！讓我們能夠使用 JavaScript 動態的修改元素的 checked、disabled 狀態，或是 src、class 值等。

一般屬性、checked、disabled

要修改一般屬性很簡單，直接取值後賦予新值就可以將舊有的值覆蓋過去，以下方程式為例：

<img src="./img1.jpg">
<input class="check" id="check1" type="checkbox" value="3" name="checkbox" checked>
<input class="check" id="check2" type="checkbox" value="1" name="checkbox">

// 修改圖片的 src (替換圖片)
document.querySelector('img').src = './img2.jpg';
// 取消預設打勾的選項 (以 query 抓 checkbox 中被打勾的選項並將 checked 設為 false)
document.querySelector('input[name="checkbox"]:checked').checked = false;
// 或可以抓指定選項修改 checked 狀態
document.querySelector('#check2').checked = true; // 直接將選項二打勾

Class

要修改 Class 有兩種方法，一個是透過 className 取得字串並將其賦值，但這種方法會整個覆蓋掉所有的 class，所以在實際上我們更常以操作 classList 的方式來管理元素的 class。

• 以 Class 修改

  <div id="block" name="title" class="red bold gray title"></div>
  

  // 原始 class
  document.querySelector('div').className; // 'red bold gray title'
  // 修改 class，將字串改為 'blue'
  document.querySelector('div').className = 'blue';
  // 修改後的 class
  document.querySelector('div').className; // 'blue' (原本的都被覆蓋，只剩下 blue 這個 class)
  

• 以 ClassList 修改
  與單純的 className 不同，classList 提供了三種修改 class 的方法：add (新增)、remove (移除)、及 toggle (切換)，這三種方法可以對單一個 class 進行操作，不會影響其他的 class。

  • element.classList.add('class名稱')：在現有 classList 中加入新 class
  • element.classList.remove('class名稱')：在 classList 中刪除指定 class
  • element.classList.toggle('class名稱')：切換指定 class，若目前有此 class 則刪除，若無則添加

  <div id="block" name="title" class="red bold gray title"></div>
  

  // 原始 classList
  document.querySelector('div').classList; // ['red', 'bold', 'gray', 'title']
  // add，語法：element.classList.add('class名')
  // 作用：新增 class 到元素的 classList 中
  // 新增 blue
  document.querySelector('div').classList.add('blue'); 
  // 新增後 classList
  document.querySelector('div').classList; // ['red', 'bold', 'gray', 'title', 'blue']
  
  // remove，語法：element.classList.remove('class名')
  // 作用：從 classList 中刪除指定 class
  // 刪除 red
  document.querySelector('div').classList.remove('red'); 
  // 刪除後 classList
  document.querySelector('div').classList; // ['bold', 'gray', 'title', 'blue']
  
  // toggle，語法：element.classList.toggle('class名')
  // 作用：切換指定的 class，若該 class 已存在於 classList 則刪除，若不存在則新增
  // 切換 gray
  document.querySelector('div').classList.toggle('gray'); 
  // 切換後 classList (因為 gray 存在於 classList 中所以會刪除)
  document.querySelector('div').classList; // ['bold', 'title', 'blue']
  // 切換 orange
  document.querySelector('div').classList.toggle('orange'); 
  // 切換後 classList (因為 orange 不存在所以會新增)
  document.querySelector('div').classList; // ['bold', 'title', 'blue', 'orange']
  

Style

除了修改 class 之外，我們也能用 JavaScript 透過元素的 .style 單獨修改某一個 CSS 屬性。

• 方法一：使用 element.style.CSS屬性名 = 值
  它的概念是直接取得該元素 style 中的某屬性值，並將新值覆蓋到舊值中，在此方法中所有有 dash (-) 符號的屬性值都需要使用駝峰式寫法，例如 background-color' 需要寫成 backgroundColor、font-size寫成fontSize`。

  <div id="block" name="title" class="red bold gray title">123</div>
  

  // 將背景改為紅色
  document.querySelector('div').style.backgroundColor = 'red';
  // 將文字大小改為 50px
  document.querySelector('div').style.fontSize = '50px';
  

• 方法二：使用 element.style = 'CSS樣式'
  概念是將 CSS 樣式加到 element.style 中，語法較單純都跟 CSS 寫法相同，不需考慮駝峰。但這邊要注意的是每一次下 .style = 值 時，是直接將整個 .style 的值修改為新值，要注意可能會將之前使用 .style 設定的樣式覆蓋掉。

  <div id="block" name="title" class="red bold gray title">123</div>
  

  // 將背景改為紅色
  document.querySelector('div').style = 'background-color: red';
  // 背景變為紅色
  // 將文字大小改為 50px
  document.querySelector('div').style.fontSize = '50px';
  // 紅色背景被覆蓋，文字大小改為 50px
  
  // 若要同時顯示 50px 文字和紅色背景只能用下列寫法將整串 CSS 同時加到 .style 中
  document.querySelector('div').style = 'background-color: red; font-size:50px';
  

setAttribute()

除了上述幾種方法外，setAttribute() 也可以讓我們輕鬆修改元素屬性的值，語法很簡單，只要使用 element.setAttribute(屬性名, 值) 就可以幫指定屬性設定屬性值。

<img src="./img1.jpg">

// 取得原始 img src
document.querySelector('img').getAttribute('src'); // './img1.jpg'
// 修改 src
document.querySelector('img').setAttribute('src', './img2.jpg');
// 取得新 src
document.querySelector('img').getAttribute('src'); // './img2.jpg'

innerHTML、innerText

使用 element.innerText = 新值 時可以動態修改元素內的文字內容，執行後會將原本的內容覆蓋為新值。
innerText 在顯示時不會解析 HTMl 標籤，所以若值內含有相關標籤時，會以純文字直接顯示在網頁上。

<div id="block">123</div>

修改 div 中的內容：

document.getElementById('block').innerText = '妳好';

再次修改 div 中的內容：(不解析 HTML 標籤)

document.getElementById('block').innerText = '<a>哈囉</a>';

不同於 innerText， innerHTML 在頁面渲染時會進行標籤解析，所以通常會用來動態修改頁面，例如表格刪減。

<div id="block">123</div>

修改 div 中的內容：

document.getElementById('block').innerHTML = '妳好';

再次修改 div 中的內容：(解析 HTMl 標籤)

document.getElementById('block').innerHTML = '<button>哈囉</button>';

上一篇：[快速入門前端 61] JavaScript：DOM (3) 取得元素的屬性值
下一篇：[快速入門前端 63] JavaScript：DOM (5) 節點的 CRUD - 新增節點
系列文章列表：[快速入門前端] 系列文章索引列表