23

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 divs 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.

John Fitzpatrick
  • 4,207
  • 7
  • 48
  • 71
  • Is the style defined inside the CSS? Or into the HTML tag? – Niccolò Campolungo May 25 '13 at 11:00
  • 1
    In scenario one, which works as expected, `display:none` is set in the HTML tag. In scenario two, which is the one that I am not understanding, `display:none` is set in the css file. I hope I've used correct terminology above. – John Fitzpatrick May 25 '13 at 11:02
  • @John F, can you please update your question saying if you are interested of solutions that involve or not involve frameworks? I do feel the need for downvotes to be justified here. Thanks – alexb May 25 '13 at 11:52
  • @Alexb sorry for the downvotes. All replies are welcome by me. I will mention that. – John Fitzpatrick May 25 '13 at 11:55
  • @Alexb: To be honest, the most useful part of your answer were the links with the explanations of what was going on. The Jquery snippet was icing on the cake. – John Fitzpatrick May 25 '13 at 11:58

4 Answers4

28

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
Niccolò Campolungo
  • 11,824
  • 4
  • 32
  • 39
3

It's not working because you removed it as a style attribute on your element, and placed it in an external stylesheet. DOM will not show attribute values that do not exist in the document object (DOM is merely an XML parser that reads your HTML document verbatim).

To find CSS values set in an external stylesheet, you have to parse document.styleSheets and find the matching selector(s).

This is where using a library like jQuery becomes really handy, because it parses external stylesheets, and has helper methods to get the full CSS applied to an element.

Example of how you would do this in jQuery:

value = $("#anID").css("display");

PS - Looking for an empty string won't work for you, either, because display: "" is not the same as display: "none" (and in fact, is the same as display: block, for a div, because a blank essentially means inherit)

Steven Moseley
  • 15,871
  • 4
  • 39
  • 50
2

My solution:

Create class .hidden

.hidden {
   display: none !important;
}

Javascript:

function toggleHidden(id) {
    var x = document.getElementById(id);
    x.classList.toggle('hidden');
}
Envy
  • 510
  • 6
  • 19
0

The javascript display property stands for only for DOM attribute

Mozilla JS wiki, Returns an object that represents the element's style attribute.

W3schools, The Style object represents an individual style statement

You could use jquery's css method to get a mixed display value like 

alert($("#foo").css("display"))

It should show none even if you set it with css

alexb
  • 971
  • 6
  • 12
  • This is a dupe of my answer, with a jquery example provided. – Steven Moseley May 25 '13 at 11:12
  • @LightStyle, yes, I mentioned that "you could use jquery" – alexb May 25 '13 at 11:15
  • @alex, you haven't added anything useful with this answer. – Steven Moseley May 25 '13 at 11:16
  • @Steven Moseley, "dupe"? I am not an EN native, I should read this like I copied your answer? – alexb May 25 '13 at 11:16
  • copied, maybe not, but duplicated almost verbatim, yes. – Steven Moseley May 25 '13 at 11:17
  • I know, but I don't really understand this need of using jQuery. Isn't it simple to write your own code? Libraries must be used for something very large and hard to do, like cross browser compatibility, but I have posted a snippet that makes all the work with 3 lines of code. Is jQuery really needed? – Niccolò Campolungo May 25 '13 at 11:18
  • first, I don't understand the downvote. I would understand it if I would have wrote something that was misleading @John F – alexb May 25 '13 at 11:18
  • @LightStyle, I don't see where the author said that he won't accept answers involving js libraries. This is the downvote for? +1 from me for you both. SO should be proud of you – alexb May 25 '13 at 11:21
  • @Steven M, yes, I see your point. You have the Mozilla and W3S examples, the entry phrase is the same word by word and the same for jquery ex. I agree with you that SO promotes a rush competition for answers. +1 from me – alexb May 25 '13 at 11:24
  • No, I'm not telling you that your answer is wrong, but I'm asking you why using jQuery when it is not necessary. It would only add KBs of data and HTTP Requests to the users. – Niccolò Campolungo May 25 '13 at 11:29
  • Ok, you posted a better answer than me if the author is into this level of perf but my question is, is it a reason enough for the downvote? You yourself said that it is not wrong and the author didn't mention anything about JS libraries – alexb May 25 '13 at 11:38
  • anyway, forget it. it's a pity SO become much about competition than about helping people – alexb May 25 '13 at 11:40
  • @alexb - "Competition" is serial-downvoting other members because they downvoted your answer for not being helpful. "Helping people" is providing a unique, helpful response that adds to the community. – Steven Moseley May 25 '13 at 11:43
  • In my opinion yes, it is a good reason to downvote(otherwise I wouldn't had). Anyway you earned 6 points from this answer, what's the problem? If is the reputation that you want, then you obtained it. If you improve your answer telling some disadvantages of using jQuery, I'll be happy to remove the downvote. Otherwise, in my opinion it is an incomplete answer. I hope you understand what I'm telling you. – Niccolò Campolungo May 25 '13 at 11:45
  • @Steven, we both have a distinct perspective about the term "unique". I explained above why I see no resemblance between our answers. – alexb May 25 '13 at 11:46
  • :) no, I am not into points, you can leave the downvote as it is. My problem is that I feel my answer is perfectly valid since the author didn't say he is into performance. – alexb May 25 '13 at 11:50
  • Well, as you want. In my opinion you haven't *helped* him, you have solved his problem causing him another one. Performance is the first thing to look at when writing code. Due to this reason, your answer seems incomplete to me. – Niccolò Campolungo May 25 '13 at 11:54
  • 1
    I found the links in this answer helpful for understanding what I was doing wrong. – John Fitzpatrick May 25 '13 at 11:57