Javascript 警报 getElementsByClassName ("x").style.display

Question

我试图通过按类排序的JS获取“display”的值。我的代码是:

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

问题是警报框是空的。通话

alert(x.length);

运行良好并返回“4”。我究竟做错了什么？非常感谢!

Answer 1

问题是，如果元素是通过外部 css 而不是使用 style 属性的内联 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' />