JavaScript是一種流行的編程語言，常常用于網頁設計和動態效果的實現。在網頁設計中，經常需要獲取元素的display屬性，以便根據不同的條件隱藏或顯示元素。下面將詳細介紹如何通過JavaScript獲取元素的display屬性。

在JavaScript中獲取元素的display屬性非常簡單。可以使用element.style.display來獲取元素的內聯樣式的display屬性，例如：

<script> 
var element = document.getElementById("example");
var display = element.style.display;
console.log(display);
</script>
<div id="example" style="display: block;"></div>

在上面的代碼中，我們首先通過getElementById方法獲取了id為example的元素，然后通過element.style.display獲取了該元素內聯樣式的display屬性的值，并打印到控制臺中。需要注意的是，使用該方法只能獲取元素內聯樣式的display屬性，如果元素沒有內聯樣式的話，則返回的值為“”。

有時候我們需要獲取元素的計算樣式，而不是內聯樣式，此時可以使用window.getComputedStyle方法。例如：

<script>
var element = document.getElementById("example");
var style = window.getComputedStyle(element);
var display = style.display;
console.log(display);
</script>
<div id="example" style="display: block;"></div>

在上面的代碼中，我們首先通過getElementById方法獲取了id為example的元素，然后通過window.getComputedStyle方法獲取了該元素的計算樣式，最后通過style.display獲取了計算樣式中的display屬性的值，并打印到控制臺中。需要注意的是，使用該方法獲取到的是計算樣式，而不是內聯樣式。

當元素被設置為none時，它將不會被顯示。但是使用上述方法獲取到的值仍可能是“block”或“inline”等值。如果要檢查元素是否被隱藏，可以通過以下代碼來實現：

<script>
var element = document.getElementById("example");
var display = window.getComputedStyle(element).getPropertyValue('display');
if (display === 'none') {
console.log("元素被隱藏了");
} else {
console.log("元素可見");
}
</script>
<div id="example" style="display: none;"></div>

在上面的代碼中，我們首先通過getElementById方法獲取了id為example的元素，然后通過window.getComputedStyle方法獲取了該元素的計算樣式，然后通過getPropertyValue方法獲取了計算樣式中的display屬性的值，并判斷該值是否為“none”，如果是則表示元素已被隱藏，否則表示元素可見。

總的來說，通過JavaScript獲取元素的display屬性非常簡單。可以使用element.style.display來獲取元素的內聯樣式的display屬性，也可以使用window.getComputedStyle方法獲取元素的計算樣式中的display屬性，需要注意的是，當元素被設置為none時，其display屬性的值仍可能是“block”或“inline”等值，因此需要特別注意該情況。