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

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

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

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

到

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

来源

2012-08-03 Troy Thibodeaux

'OBJ.style.display ='none''是**赋值**不是比较。由于*非空字符串*的计算结果为“真”，因此它将始终评估为“真”，并且**您将将“OBJ.style.display”设置为“无”。 – 2012-08-03 16:11:33

你能发表一些代码吗？ – 2012-08-03 16:11:52

使用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')

来源

2012-08-03 16:21:34 0x499602D2

感谢您的帮助。所有三种方法都有意义，虽然计算样式方法似乎是合乎逻辑的方法，但检查offsetHeight的过程非常简单。 Shredder指出，派对方式可能存在问题。 – 2012-08-03 18:08:50

元素的style属性只包含了内嵌式的，而不是继承的样式或样式从一个样式表。

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

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

来源

2012-08-03 16:23:38 Guffa

另一个建议是使用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-03 16:31:13

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

回答

相关问题