为什么这个 style.display 不起作用？答案

【问题标题】：why won't this style.display work?为什么这个 style.display 不起作用？
【发布时间】：2016-07-14 04:13:51
【问题描述】：

为什么这不起作用？它应该检查 display css 样式的元素。

if (byId("annonsera_price").style.display=='inline' || byId("annonsera_price").style.display=='block'){
alert ("Hello");
}

function byId(x){
        return document.getElementById(x);
}

更新2：

<input style="width:100px;" type="text" name="annonsera_price" id="annonsera_price">

我也没有用css设置！

【问题讨论】：

顺便说一句，不工作的是警告框没有显示，即使显示实际上设置为“阻止”！
byId("annonsera_price").style.display 是否返回“block”？
不，它返回一个空白警告框！

标签： javascript html

【解决方案1】：

如果样式是通过 CSS 设置的或者是默认样式，则需要获取元素的计算样式：

var el    = document.getElementById("annonsera_price");

// currentStyle for IE, getComputedStyle for standards-compliant browsers
var style = el.currentStyle || window.getComputedStyle(el);

if (style.display == "inline" || style.display == "block")
    alert("Hello");

【讨论】：

这很有趣。我总是使用 FireBug 或 IEDevtoolbar 之类的工具来找到它，但通过代码知道如何做到这一点总是很好

【解决方案2】：

首先尝试仅提醒 style.display 并查看它包含的内容：

var el = document.getElementById("annonsera_price");
alert(el.style.display);

style 仅引用 style 属性中的内容（或通过 JS 在 style 属性上设置）。显示可能是通过类设置的，因此el.style.display 不会显示任何内容。

[更新]：鉴于更新，没有警报发生的原因是因为style.display 将是“”，而不是“内联”或“阻止”。在您将其设置为 style 属性或设置 .style.display 之前，它不会是“内联”或“阻塞”。

【讨论】：

您可以在 if 语句中使用它，这就是为什么我说您需要告诉我们它返回的内容。如果我设置自己的元素，您的代码将为我工作。我们需要找出您正在处理的元素包含什么。
我错了，我根本没有用css设置...检查更新
警报返回一个空白警报框...没有价值！
当元素的alert(style.display) 时返回一个空白的警告框
没错。 style.display 将为空白，直到您将其设置为某个值。仅仅因为它具有默认行为，并不意味着 style.display 拥有默认值。空白值只会使其使用其默认行为。