在 JavaScript 開(kāi)發(fā)中，經(jīng)常需要獲取 HTML 元素的樣式屬性，以便進(jìn)行動(dòng)態(tài)的樣式調(diào)整和交互效果的實(shí)現(xiàn)。以下是幾種常見(jiàn)的方法來(lái)獲取元素的樣式屬性：

一、使用 `style` 屬性

每個(gè) HTML 元素都有一個(gè) `style` 屬性，它包含了該元素直接在 HTML 中設(shè)置的內(nèi)聯(lián)樣式。通過(guò)訪問(wèn)元素的 `style` 屬性，可以獲取這些內(nèi)聯(lián)樣式的屬性值。

例如，對(duì)于一個(gè) `div` 元素：

```html

```

在 JavaScript 中，可以這樣獲取其樣式屬性：

```javascript

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

const width = myDiv.style.width;

const height = myDiv.style.height;

const backgroundColor = myDiv.style.backgroundColor;

console.log(width); // "200px"

console.log(height); // "100px"

console.log(backgroundColor); // "blue"

```

需要注意的是，使用 `style` 屬性只能獲取內(nèi)聯(lián)樣式的屬性值，如果元素的樣式是通過(guò)外部 CSS 文件或內(nèi)部樣式表設(shè)置的，這種方式將無(wú)法獲取到。

二、使用 `getComputedStyle` 方法

`getComputedStyle` 方法可以獲取元素在當(dāng)前樣式規(guī)則下的計(jì)算后的樣式屬性值，包括內(nèi)聯(lián)樣式、外部 CSS 和內(nèi)部樣式表的綜合效果。

示例代碼如下：

```javascript

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

const computedStyle = window.getComputedStyle(myDiv);

const width = computedStyle.getPropertyValue('width');

const height = computedStyle.getPropertyValue('height');

const backgroundColor = computedStyle.getPropertyValue('background-color');

console.log(width); // "200px"

console.log(height); // "100px"

console.log(backgroundColor); // "blue"

```

使用 `getComputedStyle` 方法時(shí)，需要傳遞要獲取樣式的元素作為參數(shù)，它返回一個(gè) `CSSStyleDeclaration` 對(duì)象，通過(guò) `getPropertyValue` 方法可以獲取特定樣式屬性的值。

三、使用類選擇器和樣式表

如果元素的樣式是通過(guò)類選擇器在 CSS 中設(shè)置的，可以通過(guò)獲取元素的類名，然后在 JavaScript 中查找對(duì)應(yīng)的樣式規(guī)則來(lái)獲取樣式屬性。

例如，有一個(gè) CSS 類 `.myStyle` ：

```css

.myStyle {

width: 300px;

height: 150px;

background-color: red;

}

```

在 JavaScript 中，可以這樣獲?。?/p>

```javascript

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

const classList = myDiv.classList;

if (classList.contains('myStyle')) {

const styleRules = document.styleSheets[0].cssRules;

for (let i = 0; i < styleRules.length; i++) {

if (styleRules[i].selectorText === '.myStyle') {

const width = styleRules[i].style.width;

const height = styleRules[i].style.height;

const backgroundColor = styleRules[i].style.backgroundColor;

console.log(width); // "300px"

console.log(height); // "150px"

console.log(backgroundColor); // "red"

}

}

}

```

這種方法需要遍歷文檔的樣式表，找到對(duì)應(yīng)的類選擇器規(guī)則，并獲取其樣式屬性。

在 JavaScript 中獲取元素的樣式屬性有多種方法，可以根據(jù)具體的需求選擇合適的方式。使用 `style` 屬性適用于內(nèi)聯(lián)樣式，`getComputedStyle` 方法適用于綜合的樣式效果，而通過(guò)類選擇器和樣式表則適用于通過(guò) CSS 類設(shè)置樣式的情況。這些方法在實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面效果、交互設(shè)計(jì)等方面都非常有用。