当在主样式表中设置时,myDiv.style.display返回空 [英] myDiv.style.display returns blank when set in master stylesheet
问题描述
Short Version:这是标准的行为,当 myDiv.style.display
在主样式表中,c> div 到 display:none
,但通过内联样式设置时返回none
$ b
长版本:
我有一些 div
显示
样式隐藏和取消隐藏,在和
none
。他们总是开始隐藏( display:none
),因为我已经设置了内联样式:
< div id =anIDclass =aClassstyle =display:none>
stuff
< / div>
以下是在 none
和块
。两个chOpsXXX()函数只是将 divSection.style.display
设置为相反的值(以及其他内务处理):
var divSection = document.getElementById(chOpsSection+ strSectionID);
var strDisplay = divSection.style.display;
if(strDisplay ==none){
chOpsDisplaySection(strSectionID);
} else {
chOpsHideSection(strSectionID);
}
当我使用内联样式属性设置初始 display:none
style。
我也在主样式表中为这些div设置其他样式。所以我决定将
display:none
的初始状态移动到所述样式表可能是有意义的。我这样做了。 但是当我这样做时, div
( display:none
),但是第一次调用 divSection.style.display
会返回一个空字符串 alert(strDisplay);
返回一个空白字符串,而不是null)。
我上面显示的Javascript然后隐藏它(因为它不等于无),然后下一个调用 divSection.style.display
返回none,一切正常。 (如果我在主样式表中将它设置为 inline
,也会有同样的行为: div
是初始化可见的,到 divSection.style.display
返回一个空白字符串)。
这很容易解决, none和在我的Javascript上面。但我想知道如果从 divSection.style.display
返回一个空白字符串是标准行为。
如果你通过JS访问DOM元素(例如使用),那么你的所有回复都是受欢迎的。
getComputedStyle
(或 currentStyle
for IE)。 function getStyle(id,name)
{
var element = document.getElementById(id);
return element.currentStyle? element.currentStyle [name]:window.getComputedStyle? window.getComputedStyle(element,null).getPropertyValue(name):null;
}
用法( JSFiddle ):
var display = getStyle('myDiv','display ');
alert(display); //将打印'none'或'block'或'inline'等
Short Version: Is it standard behaviour that myDiv.style.display
(Javascript) returns blank when I have set that div
to display:none
in a master stylesheet, yet returns "none" when it is set via an inline style?
Long Version:
I have some div
s that I hide and unhide via their display
style, toggling it with Javascript between block
and none
. They always start off hidden (display:none
) which I have been setting with inline styles thusly:
<div id="anID" class="aClass" style="display:none">
stuff
</div>
Here is the Javascript to toggle between none
and block
. The two chOpsXXX() functions just set the divSection.style.display
to the opposite value (along with other housekeeping):
var divSection = document.getElementById("chOpsSection" + strSectionID);
var strDisplay = divSection.style.display;
if (strDisplay == "none") {
chOpsDisplaySection(strSectionID);
} else {
chOpsHideSection(strSectionID);
}
This all works fine when I use an inline style attribute to set the initial display:none
style.
I am also setting other styles for these divs in master stylesheet. So I decided it might make sense to move the initial state of display:none
to said stylesheet. I did so. I won't post it, I think you can picture it.
But when I did so, the div
is initially hidden (display:none
), but the first call to divSection.style.display
returns an empty string (alert(strDisplay);
returns a blank string, not null).
My Javascript shown above then hides it (becaues it doesn't equal "none") and then the next call to divSection.style.display
returns "none" and everything works fine from there. (Same behaviour if I set it to inline
in the master stylesheet: the div
is initialy visible, and the first call to divSection.style.display
returns a blank string).
This is easy enough to fix by checking for both "none" and "" in my Javascript above. But I would like to know if this returning of a blank string from divSection.style.display
is standard behaviour.
All replies are welcome.
If you access to a DOM Element via JS(using for example getElementById
) you'll not be able to read the computed style of that element, because it is defined inside the CSS file. To avoid this, you have to use property getComputedStyle
(or currentStyle
for IE).
function getStyle(id, name)
{
var element = document.getElementById(id);
return element.currentStyle ? element.currentStyle[name] : window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(name) : null;
}
Usage(JSFiddle):
var display = getStyle('myDiv', 'display');
alert(display); //will print 'none' or 'block' or 'inline' etc
这篇关于当在主样式表中设置时,myDiv.style.display返回空的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!