获取属性 - JavaScript

在 JavaScript 中获取属性是非常常见的操作。属性可以是对象的属性、DOM 元素的属性或样式属性等等。在这篇文章中，我们将介绍如何使用 JavaScript 获取这些不同属性。

对象属性

JavaScript 中的对象是一组键值对。要获取对象的属性，可以使用点号或方括号语法。

使用点号语法

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

const name = person.name; // 'John'
const age = person.age; // 30
const city = person.city; // 'New York'

使用方括号语法

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

const name = person['name']; // 'John'
const age = person['age']; // 30
const city = person['city']; // 'New York'

使用方括号语法时，属性名称必须作为字符串传递。

DOM 元素属性

要获取 DOM 元素的属性，可以使用点号语法或 getAttribute 方法。

使用点号语法

<div id="myDiv">Hello World!</div>

const myDiv = document.getElementById('myDiv');

const innerHTML = myDiv.innerHTML; // 'Hello World!'
const id = myDiv.id; // 'myDiv'

使用 getAttribute 方法

<img src="http://example.com/image.jpg" alt="An image" />

const img = document.getElementsByTagName('img')[0];

const src = img.getAttribute('src'); // 'http://example.com/image.jpg'
const alt = img.getAttribute('alt'); // 'An image'

使用 getAttribute 方法时，属性名称必须作为字符串传递。

样式属性

要获取样式属性，可以使用点号语法或 getComputedStyle 方法。

使用点号语法

<div id="myDiv" style="color: red;">Hello World!</div>

const myDiv = document.getElementById('myDiv');

const color = myDiv.style.color; // 'red'

使用 getComputedStyle 方法

<div id="myDiv" style="color: red;">Hello World!</div>

const myDiv = document.getElementById('myDiv');

const computedStyle = window.getComputedStyle(myDiv);
const color = computedStyle.getPropertyValue('color'); // 'rgb(255, 0, 0)'

使用 getComputedStyle 方法可以获取计算后的样式属性值，而不是在 HTML 标记中指定的值。使用该方法时，需要传递要获取属性的 DOM 元素。

结论

在 JavaScript 中获取属性是一项非常基本和重要的操作。无论是获取对象的属性、DOM 元素的属性还是样式属性，我们都可以使用不同的方法来实现。掌握这些技能可以帮助我们更加高效地编写 JavaScript 代码。