JS修改元素屬性的全面指南

一、JS修改元素屬性的方法

修改元素屬性是 web 開發過程中經常遇到的需求，而 JavaScript 作為前端三劍客之一，其重要性不言自明。下面介紹如何使用 JavaScript 去修改元素屬性，方法主要有三種。

方法一：使用 DOM API 的屬性更新方法

使用 DOM API 的屬性更新方法是一種非常直觀、易用的方式，我們可以通過 document 對象和其他 DOM 選擇器獲取到目標元素，然後通過修改其內置屬性來實現元素屬性修改。

// 獲取目標元素
let element = document.querySelector('#target');

// 修改元素屬性
element.src = 'img/new-img.jpg';

方法二：使用 setAttribute() 方法

setAttribute() 方法可以幫助我們設置任意名稱和值的屬性，比如修改一個元素的 aria-label 屬性：

// 獲取目標元素
let element = document.querySelector('#target');

// 修改元素屬性
element.setAttribute('aria-label', 'new label');

方法三：使用 dataset 對象

dataset 對象可以幫助我們在 HTML 標籤里進行自定義數據的存儲和獲取，通過其 API，我們也可以獲得目標元素的屬性值，進而修改元素屬性。

// 獲取目標元素的自定義數據
let data = document.querySelector('#target').dataset;

// 修改某個數據
data.customKey = 'new value';

二、JS修改樣式中的屬性值

樣式是定義和渲染頁面元素的重要組成部分，我們經常會需要修改或更新元素的樣式屬性值。以下介紹幾種如何使用 JavaScript 修改樣式值的方法。

方法一：修改內聯樣式

當我們需要修改一個內聯樣式時，可以直接使用 style 對象的屬性來描述

// 獲取目標元素
let element = document.querySelector('#target');

// 修改元素的背景色
element.style.backgroundColor = '#f1f1f1';

方法二：使用 setProperty() 函數

如果屬性沒有直接在內聯樣式中定義，我們需要使用 setProperty() 函數去修改其屬性值：

// 獲取目標元素
let element = document.querySelector('#target');

// 修改元素顏色
element.style.setProperty('color', 'green');

方法三：使用 CSSStyleSheet 對象

CSSStyleSheet 對象提供了一種修改元素屬性的方法，使用該方式可以定位到真實的樣式表，逐層查找目標屬性。

// 獲取當前樣式表的引用
let stylesheet = document.styleSheets[0];

// 修改某個選擇器下的樣式
let rules = stylesheet.cssRules || stylesheet.rules;
rules[0].style.color = 'purple';

三、修改元素屬性案例

下面從經典案例入手，針對常見需要修改元素屬性的場景，給出詳細的操作方法。

修改圖片鏈接

// 獲取目標元素
let element = document.querySelector('img');

// 修改圖片鏈接
element.src = 'new-img.jpg';

修改輸入框的佔位符

// 獲取目標元素
let element = document.querySelector('input');

// 修改輸入框的佔位符
element.placeholder = '新的佔位符';

修改 a 標籤的 href 屬性

// 獲取目標元素
let element = document.querySelector('a');

// 修改 a 標籤的 href 屬性
element.href = 'https://www.example.com';

四、JS修改HTML元素內容

修改DOM元素的內容很常見，下面介紹三種實現方式。

使用 innerHTML

// 獲取目標元素
let element = document.querySelector('#target');

// 修改元素內容
element.innerHTML = '新的內容';

使用 textContent

// 獲取目標元素
let element = document.querySelector('#target');

// 修改元素內容
element.textContent = '新的文本';

使用 DOM API

// 獲取目標元素
let element = document.querySelector('#target');

// 清空子元素
while (element.hasChildNodes()) {
  element.removeChild(element.lastChild);
}

// 插入新的文本
let textNode = document.createTextNode('新的文本');
element.appendChild(textNode);

五、JS修改HTML元素屬性的方法

修改元素屬性值的方式比較多，下面介紹三種不同的方法。

使用 getAttribute() 和 setAttribute()

// 獲取目標元素的屬性
let element = document.querySelector('#target');
let oldValue = element.getAttribute('data-src');

// 修改元素屬性
element.setAttribute('data-src', 'new-value');

修改 HTML5 自定義數據

// 獲取目標元素的 HTML5 數據
let element = document.querySelector('#target');
let oldValue = element.dataset.customKey;

// 修改元素數據
element.dataset.customKey = 'new-value';

使用 classList 屬性

// 獲取目標元素的 class
let element = document.querySelector('#target');
let classes = element.classList;

// 添加新的 class
classes.add('new-class');

// 刪除舊的 class
classes.remove('old-class');

六、JS修改偽元素樣式

偽元素本質上是一種特殊的 CSS 選擇器，雖然無法通過普通的 DOM API 進行獲取和修改，但是可以通過修改其綁定的 CSS 規則來完成

// 獲取樣式表對象和要修改的選擇器
let stylesheet = document.styleSheets[0];
let selector = '.example::before';

// 修改偽元素樣式
let rules = stylesheet.cssRules || stylesheet.rules;
rules[0].style.content = '""';
rules[0].style.backgroundColor = 'red';

七、原生JS修改元素CSS屬性

直接通過 JavaScript 去操作 CSS 樣式通常需要看到很多重複的代碼，不僅容易出錯，而且代碼可讀性也不高。而使用類庫和框架，可以大大減少操作 CSS 的代碼量，減少出錯的可能性。

// 獲取目標元素
let element = document.querySelector('#target');

// 定義樣式對象
let styles = {
  backgroundColor: 'red',
  color: 'white',
  fontSize: '16px'
};

// 應用樣式
Object.assign(element.style, styles);

八、JS修改元素內容和樣式

有時候需要同時修改元素的內容和樣式，以下是兩種同時修改的方案。

修改樣式和內容

// 獲取目標元素
let element = document.querySelector('#target');

// 定義新的樣式和內容
let newStyles = {
  backgroundColor: 'red',
  color: 'white',
  fontSize: '16px'
};
let newContent = '新的內容';

// 應用樣式和內容
Object.assign(element.style, newStyles);
element.innerHTML = newContent;

修改樣式和內容（使用 jQuery）

// 使用 jQuery 獲取目標元素
let $element = $('#target');

// 定義新的樣式和內容
let newStyles = {
  'background-color': 'red',
  'color': 'white',
  'font-size': '16px'
};
let newContent = '新的內容';

// 應用樣式和內容
$element.css(newStyles);
$element.html(newContent);

九、JS修改元素屬性值的注意事項

需要注意的是，修改元素屬性值是具有局限性的，因為有些屬性值無法實時更新。

修改 value 屬性可能無法實時更新

對 input 元素的 value 屬性進行修改時，並不能保證修改後就能立即獲取到新的值，有時候需要等待瀏覽器渲染完成才能獲取。

// 獲取目標元素
let element = document.querySelector('input');

// 修改 input 的 value
element.value = 'new value';

// 立即獲取 value 值，可能返回的依然是舊的值
let value = element.value;

修改樣式屬性可能可靠性不高

通過 JavaScript 動態修改樣式屬性時，可能會受到 CSS 規則和瀏覽器支持的限制，因此可靠性不高。

// 獲取目標元素
let element = document.querySelector('div');

// 使用 JavaScript 修改樣式，但可能會被瀏覽器標記為「弱實現」規則
element.style.background = 'red';

參考資料

1. https://www.w3schools.com/js/js_htmldom_elements.asp
2. https://developer.mozilla.org/zh-CN/docs/Web/API/ElementCSSInlineStyle/setProperty
3. https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/