Question

我有简单的JS功能，可以切换DIV的DISPLAY。默认情况下，DIV显示设置为“无”。如果我使用内联样式来设置显示，它可以正常工作，但如果我在头部设置样式，它只能在我第二次运行该函数后才能工作。因此，只有在功能中设置显示后，才会看到显示设置为无。它无法识别它是在头部的CSS中设置的。如果我使用内联样式，它可以正常工作。

另外，如果我改变条件语句：

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

到

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

Answer 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' )

Answer 2

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

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

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

Answer 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/

请注意，仅当元素只包含一个类时才会起作用。如果它包含更多，则需要修改。

Javascript只识别内联样式而不是样式设置在头部

3 个答案: