如何使用 JavaScript 获取和设置 DOM 元素的属性和样式？-JavaScript中文网-JavaScript教程资源分享门户

如何使用 JavaScript 获取和设置 DOM 元素的属性和样式？

推荐答案

获取 DOM 元素属性

使用 getAttribute() 方法可以获取 DOM 元素的属性值。

const element = document.getElementById('myElement');
const attributeValue = element.getAttribute('data-attribute');
console.log(attributeValue); // 输出属性值

对于一些常用的属性，可以直接通过元素对象的属性访问，例如 id, class, src 等。

const element = document.getElementById('myImage');
const srcValue = element.src;
const className = element.className;
console.log(srcValue);
console.log(className);

设置 DOM 元素属性

使用 setAttribute() 方法可以设置或修改 DOM 元素的属性值。

const element = document.getElementById('myButton');
element.setAttribute('disabled', true); // 禁用按钮
element.setAttribute('data-new', 'new value'); // 设置自定义属性

同样，对于一些常用属性，可以直接通过元素对象的属性赋值。

const element = document.getElementById('myImage');
element.src = 'new_image.jpg'; // 设置图像源
element.className = 'new-class'; // 设置 CSS 类

获取 DOM 元素样式

使用 getComputedStyle() 方法获取元素最终渲染的样式值。

const element = document.getElementById('myDiv');
const styles = getComputedStyle(element);
const backgroundColor = styles.backgroundColor;
const fontSize = styles.fontSize;
console.log(backgroundColor);
console.log(fontSize);

对于行内样式，可以使用元素对象的 style 属性获取。

const element = document.getElementById('mySpan');
const inlineColor = element.style.color;
console.log(inlineColor); // 如果行内设置了 color 属性，则输出其值

设置 DOM 元素样式

直接修改元素对象的 style 属性，可设置行内样式。

const element = document.getElementById('myParagraph');
element.style.color = 'blue'; // 设置文本颜色
element.style.fontSize = '16px'; // 设置字体大小
element.style.backgroundColor = '#f0f0f0'; // 设置背景颜色

使用 className 或 classList 修改元素的类，从而改变样式。

const element = document.getElementById('myDiv');
element.className = 'new-class'; // 设置类名
element.classList.add('active'); // 添加类名
element.classList.remove('old-class'); // 移除类名
element.classList.toggle('visible'); //切换类名

本题详细解读

DOM 属性和样式概述

DOM (Document Object Model) 是 HTML 和 XML 文档的编程接口。DOM 将文档表示为树形结构，其中每个节点都是一个对象。我们可以通过 JavaScript 来访问和操作这些对象，包括元素的属性和样式。

属性指的是 HTML 标签上的特性，例如 id, class, src, href, disabled 等。它们定义了元素的行为和内容。

样式指的是元素的视觉外观，例如颜色，字体，大小，布局等。样式可以通过 CSS 来定义。

获取 DOM 元素属性

getAttribute(name): 这个方法用于获取指定名称的属性值。如果属性不存在，则返回 null。该方法可以获取任何 HTML 属性，包括自定义的 data-* 属性。

直接访问属性: 对于一些常用的属性，例如 id, class, src, href, 可以直接通过元素对象的属性来访问，例如 element.id, element.className, element.src。

设置 DOM 元素属性

setAttribute(name, value): 这个方法用于设置或修改指定名称的属性值。如果属性不存在，则会创建该属性。

直接设置属性：对于一些常用属性，可以直接通过元素对象的属性来赋值，例如 element.id = "newId", element.className = "newClass"， element.src = "new_image.jpg"。

注意：对于 disabled 属性，设置 true/false 相当于添加/移除 disabled 属性。

获取 DOM 元素样式

getComputedStyle(element): 这个方法返回一个包含元素所有最终应用的 CSS 属性值的对象。这些值是计算后的值，考虑了所有样式表规则。

元素的 style 属性：该属性返回的是一个 CSSStyleDeclaration 对象，包含元素所有内联样式。通过修改 style 对象的属性，可以动态设置元素的样式。

设置 DOM 元素样式

通过 style 属性：可以直接设置元素的行内样式，这种方式修改样式优先级最高，但不利于样式的统一维护。

通过 className 属性: 可以直接设置元素的 class 属性。这会将原来的类名替换掉，可以使用字符串操作来添加或删除类名。

通过 classList 属性：这个属性返回的是一个 DOMTokenList 对象，提供了方便的方法来操作元素的类名，包括 add(className), remove(className), toggle(className) 和 contains(className) 等方法。推荐使用。

纠错
反馈