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/