JavaScript是一門強大的編程語言，廣泛應用于網頁前端開發。在網頁開發中，獲取元素樣式是一個非常常見的需求，今天我們就來探討一下如何通過JavaScript獲取元素的樣式。

在Web開發中，常用的獲取元素樣式的方法有兩種：style屬性和getComputedStyle()方法。

1. style屬性

style屬性是DOM元素對象的一個屬性，可以通過該屬性獲取該元素的行內樣式，例如下面這個示例：

let box = document.getElementById('box');
let bgColor = box.style.backgroundColor;

上述代碼中，通過document.getElementById()獲取了一個元素節點，然后通過style屬性獲取該元素節點的backgroundColor屬性值，這個值是該元素節點在style屬性中定義的值，不包括外部CSS樣式表的設置。

2. getComputedStyle()方法

getComputedStyle()方法是window對象的一個方法，可以獲取一個元素的計算樣式，即包括內部樣式和外部樣式（例如CSS文件中定義的樣式），例如下面這個示例：

let box = document.getElementById('box');
let width = window.getComputedStyle(box, null).width;

上述代碼中，通過document.getElementById()獲取了一個元素節點，然后通過getComputedStyle()方法獲取該元素節點的width屬性值，這個值是該元素節點的最終計算樣式，包括內部樣式和外部樣式。

3. 獲取樣式屬性值

無論是通過style屬性還是getComputedStyle()方法獲取樣式，最終都是獲取樣式屬性的值，下面是一些常見的獲取樣式屬性值的代碼。

• 獲取元素寬度：

let box = document.getElementById('box');
let width = box.offsetWidth;

• 獲取元素高度：

let box = document.getElementById('box');
let height = box.offsetHeight;

• 獲取元素背景顏色：

let box = document.getElementById('box');
let bgColor = window.getComputedStyle(box, null).backgroundColor;

• 獲取元素邊框寬度：

let box = document.getElementById('box');
let borderWidth = window.getComputedStyle(box, null).borderWidth;

總結：通過style屬性和getComputedStyle()方法，可以輕松地獲取元素的樣式。在實際開發中，開發人員可以根據自己的需求和場景選擇不同的方法來獲取樣式，同時要注意獲取的樣式屬性值是帶單位的。