1

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

另外,如果我将条件语句从:

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

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

3 回答 3

1

使用window.getCurrentStyleorelement.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' )
于 2012-08-03T16:21:34.563 回答
0

另一个建议是使用 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/

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

于 2012-08-03T16:31:13.337 回答
0

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

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

if (OBJ.offsetHeight == 0) ...
于 2012-08-03T16:23:38.643 回答