获取元素属性 JavaScript

在 JavaScript 中，我们经常需要获取元素的属性。元素的属性包含了元素的各种信息，如标签名、类名、ID、样式等等。在这篇文章中，我们将介绍如何获取元素的属性。

getElementById 方法

getElementById 是 JavaScript 中最常用的方法之一。它可以通过元素的 ID 获取元素。

const element = document.getElementById("example-id"); // 获取 id 为 example-id 的元素

在上面的代码中，我们定义了一个变量 element，并使用 getElementById 方法获取 ID 为 "example-id" 的元素。通过这种方式，我们可以轻松地获取元素的属性，如下面的例子所示。

const element = document.getElementById("example-id"); // 获取 id 为 example-id 的元素

const tagName = element.tagName; // 获取标签名
const className = element.className; // 获取类名
const id = element.id; // 获取 ID

console.log(tagName); // 输出：DIV
console.log(className); // 输出：example-class
console.log(id); // 输出：example-id

getAttribute 方法

getAttribute 方法可以获取指定属性的值。

const element = document.getElementById("example-id"); // 获取 id 为 example-id 的元素

const attributeValue = element.getAttribute("data-example-attribute"); // 获取自定义属性 data-example-attribute 的值

console.log(attributeValue); // 输出：example-value

在上面的代码中，我们定义了一个变量 attributeValue，并使用 getAttribute 方法获取自定义属性 data-example-attribute 的值。

getComputedStyle 方法

getComputedStyle 方法可以获取计算后的样式。

const element = document.getElementById("example-id"); // 获取 id 为 example-id 的元素

const computedStyle = window.getComputedStyle(element);

console.log(computedStyle.color); // 输出：rgb(0, 0, 0)
console.log(computedStyle.fontSize); // 输出：16px

在上面的代码中，我们定义了一个变量 computedStyle，并使用 getComputedStyle 方法获取计算后的样式。通过这种方式，我们可以获取元素的样式，如字体大小、颜色等等。

总结

在 JavaScript 中，我们可以使用 getElementById 方法、getAttribute 方法和 getComputedStyle 方法获取元素的属性。这些方法可以让我们轻松地获取元素的各种信息，使我们的开发更加便利。

以上为获取元素属性 JavaScript的介绍。