Javascript 只识别内联样式而不是头部设置的样式答案

【问题标题】：Javascript only recognizising inline style and not style set in headJavascript 只识别内联样式而不是头部设置的样式
【发布时间】：2012-08-01 17:16:39
【问题描述】：

我有一个简单的 JS 函数来切换 DIV 的显示。 DIV 显示默认设置为“无”。如果我使用内联样式来设置显示，它可以正常工作，但如果我在头部设置样式，它只有在我第二次运行该函数后才有效。所以它只看到在函数中设置显示后显示设置为无。它不承认它是在头部的 CSS 中设置的。如果我使用内联样式，它可以正常工作。

另外，如果我将条件语句更改为：

if (OBJ.style.display == 'none')

到

if (OBJ.style.display = 'none')

【问题讨论】：

OBJ.style.display = 'none' 是一个分配，而不是比较。它将始终评估为 true，因为 非空字符串 评估为 true 并且您将设置 OBJ.style.display 为 'none'。

标签： javascript css

【解决方案1】：

使用window.getCurrentStyle 或element.currentStyle 以获得头部或身体的风格。它们被不同的浏览器支持，所以这里是一个跨浏览器的例子：

function getStyle( elem, style ) {
  var a = window.getComputedStyle,
      b = elem.currentStyle;

  if ( a ) return a( elem ).getPropertyValue( style );
  else if ( b ) return b[ style ];
}

getStyle( document.getElementById('OBJ'), 'display' )

【讨论】：

感谢您的帮助。所有这三种方法都有意义，尽管 Computed Style 方法似乎是合乎逻辑的方法，但检查 offsetHeight 几乎是最简单的。由于 Shredder 指出的原因，派对方法可能存在问题。

【解决方案2】：

元素的style 属性仅包含内联样式，不包含继承的样式或样式表中的样式。

您可以使用offsetHeight 属性来检查元素是否有任何大小，因为当元素不可见时它为零。

if (OBJ.offsetHeight == 0) ...

【讨论】：

【解决方案3】：

另一个建议是使用 css 类：

css:

.hide{
 display:none;   
}

html:

<div id="mydiv" class="hide">hello world</div>
<button onclick="toggle();">toggle</button>

js:

function toggle(){
    var obj = document.getElementById('mydiv');
    if(obj.className == 'hide')
        obj.className = '';
    else
        obj.className = 'hide'
}

http://jsfiddle.net/XBhMA/1/

请注意，这仅在元素仅包含一个类时才有效。如果包含更多，则需要修改。

【讨论】：