我有简单的 JS 函数来切换 DIV 的显示。DIV 显示默认设置为“无”。如果我使用内联样式来设置显示,它可以正常工作,但如果我在头部设置样式,它只有在我第二次运行该函数后才能工作。所以它只看到在函数中设置显示后显示设置为无。它不承认它是在头部的 CSS 中设置的。如果我使用内联样式,它工作正常。
另外,如果我将条件语句从:
if (OBJ.style.display == 'none')
至
if (OBJ.style.display = 'none')
我有简单的 JS 函数来切换 DIV 的显示。DIV 显示默认设置为“无”。如果我使用内联样式来设置显示,它可以正常工作,但如果我在头部设置样式,它只有在我第二次运行该函数后才能工作。所以它只看到在函数中设置显示后显示设置为无。它不承认它是在头部的 CSS 中设置的。如果我使用内联样式,它工作正常。
另外,如果我将条件语句从:
if (OBJ.style.display == 'none')
至
if (OBJ.style.display = 'none')
使用window.getCurrentStyle
orelement.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' )
另一个建议是使用 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'
}
请注意,这仅在元素仅包含一个类时才有效。如果它包含更多,您将需要修改。
元素的style
属性只包含内联样式,不包含继承的样式或样式表中的样式。
您可以使用该offsetHeight
属性检查元素是否具有任何大小,因为当元素不可见时它为零。
if (OBJ.offsetHeight == 0) ...