JavaScript警報getElementsByClassName（“ x”）。style.display

Question

我試圖通過按類排序的JS獲取“顯示”的值。 我的代碼是：

var x = document.getElementsByClassName("codeContainer");
alert(x[0].style.display);

問題是警報框只是空的。 通話

alert(x.length);

效果很好，返回“ 4”。 我究竟做錯了什么？ 非常感謝！

Answer 1

問題是，如果元素是使用外部CSS而不是使用樣式屬性使用內聯CSS設置格式的，則勢必會獲得空白值。

alert(x[0].style.display);

使用內聯CSS：

 var inputs = document.getElementsByTagName('input'); console.log('total inputs:', inputs.length); var bg = inputs[0].style.background; console.log('background:', bg); 

 <input type='text' style='background:orange' /> 

您需要獲取相同的getStyle（）reference的計算樣式。

 var getStyle = function(el, cssprop) { if (el.currentStyle) //IE return el.currentStyle[cssprop] else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox return document.defaultView.getComputedStyle(el, "")[cssprop] else //try and get inline style return el.style[cssprop] } var inputs = document.getElementsByTagName('input'); console.log('total inputs:', inputs.length); console.log('color:', getStyle(inputs[0], 'color')); 

 .input { color: blue; } 

 <input type='text' class='input' value='hi' /> <input type='text' class='input' value='hello' /> 

Answer 2

未定義屬性“ style.display”。 因此它返回“空”

您可以嘗試以下方法：

alert(x[0].style.display||window.getComputedStyle(x[0],null).getPropertyValue("display"));

Answer 3

在DOM准備好之后，我們才應該檢查屬性。 請檢查下面的代碼。

(function(){var x = document.getElementsByClassName("codeContainer");

alert(x[0].style.display);})();