[快速入门前端 62] JavaScript：DOM (4) 修改元素的属性值

修改元素属性值

既然在上一篇中我们已经可以拿到元素的属性值了，那下一步就是如何修改它！让我们能够使用 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>

// 原始 classdocument.querySelector('div').className; // 'red bold gray title'// 修改 class，将字串改为 'blue'document.querySelector('div').className = 'blue';// 修改后的 classdocument.querySelector('div').className; // 'blue' (原本的都被覆盖，只剩下 blue 这个 class)

以 ClassList 修改
与单纯的 className 不同，classList 提供了三种修改 class 的方法：add (新增)、remove (移除)、及 toggle (切换)，这三种方法可以对单一个 class 进行操作，不会影响其他的 class。

element.classList.add('class名称')：在现有 classList 中加入新 classelement.classList.remove('class名称')：在 classList 中删除指定 classelement.classList.toggle('class名称')：切换指定 class，若目前有此 class 则删除，若无则添加

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

// 原始 classListdocument.querySelector('div').classList; // ['red', 'bold', 'gray', 'title']// add，语法：element.classList.add('class名')// 作用：新增 class 到元素的 classList 中// 新增 bluedocument.querySelector('div').classList.add('blue'); // 新增后 classListdocument.querySelector('div').classList; // ['red', 'bold', 'gray', 'title', 'blue']// remove，语法：element.classList.remove('class名')// 作用：从 classList 中删除指定 class// 删除 reddocument.querySelector('div').classList.remove('red'); // 删除后 classListdocument.querySelector('div').classList; // ['bold', 'gray', 'title', 'blue']// toggle，语法：element.classList.toggle('class名')// 作用：切换指定的 class，若该 class 已存在于 classList 则删除，若不存在则新增// 切换 graydocument.querySelector('div').classList.toggle('gray'); // 切换后 classList (因为 gray 存在于 classList 中所以会删除)document.querySelector('div').classList; // ['bold', 'title', 'blue']// 切换 orangedocument.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';// 将文字大小改为 50pxdocument.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';// 背景变为红色// 将文字大小改为 50pxdocument.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 srcdocument.querySelector('img').getAttribute('src'); // './img1.jpg'// 修改 srcdocument.querySelector('img').setAttribute('src', './img2.jpg');// 取得新 srcdocument.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 - 新增节点
系列文章列表：[快速入门前端] 系列文章索引列表