Re: Question on style.display

"Trevor Lawrence" <Trevor L.@Canberra> wrote in message news:eLnFYTaMJHA.4724@xxxxxxxxxxxxxxxxxxxxxxx
I have this test code

<html>
<head>
<style type="text/css">
#divx {display: none}
</style>
</head>
<body>
<div id="divx">This div section is not displayed!</div>
<script>
alert ('style.display=' +document.getElementById('divx').style.display)
</script>
</body>
</html>

If I type
#divx {display: block}
the CSS is applied in that the contents <div id="divx"> is displayed,
but the alert displays
'style.display=' (After the = sign there is nothing/blank/zilch.)

If I type
#divx {display: none}
the CSS is applied in that the contents <div id="divx"> is not displayed,
the alert displays
'style.display=' (After the = sign there is nothing/blank/zilch.)

The CSS is applied in that 'block' will display the contents of the <div> and 'none' will not,
BUT the alert does NOT display 'none' 'block' or whatever is typed into #divx {display: ....}

If I alter the <script> to read
<script>
document.getElementById('divx').style.display='none'
alert ('style.display=' +document.getElementById('divx').style.display)
</script>
OR
<script>
document.getElementById('divx').style.display='block'
alert ('style.display=' +document.getElementById('divx').style.display)
</script>
I get the correct result

Is the JS application of style.display different from that of CSS ?


No this is simply the C in CSS at work. The C standards for 'Cascading' and refers to the fact the the final style applied to an element is built from a cascading set of attributes which are attached to selectors that match the element. (A selector and its attached set of attributes is known in CSS parlance as a 'rule').

Consider this markup:-

<div id="outer">
<div id="inner">Hello</div>
</div>

Now if we have this CSS:-

div {background-color:blue; border:2px solid red}
div#outer div {backgound-color:yellow; color:magenta}
#inner {backgound-color:green}

All elements start off with a base style which is implied by the context. For example a TH has a base style that includes font-weight being bold. The base context will set the default font and color etc.

In the above the only selector which matches the "outer" div is the first one. The "outer" div's final style is a combination of the base style and any attributes in this first rule which will override the base ones.

In the case fot he "inner" div all the selectors above match the element. Hence the "inner" div's final style is a combination of the base style and the attributes from all of these rules. When more than one rule defines the same attribute precedence is determined by how specific the selector is. The selector "#inner" is more specific than "div#outer div" which is in turn more specific than "div". Hence the "inner" div ends up with a final style with a border color of red, a background color of green and foreground color of magenta.


So what has this got to do with the style property on an element? Well the style property does _not_ expose the final style built from CSS. Rather you can think of it as an inline CSS rule which applies only to the element to which it is attached. Its applied to the final style as all the other CSS rules are but it has the highest precedence.

Hence when you were reading the style property you were looking for any attributes that had been specifically set to override any that might come from other CSS rules. .display returning an empty string simply means the final value of that attribute will be determined by other CSS rules or the base style.

As Dave points out the standards define a getComputedStyle function that you can use to examine the final style of an element and it is supported in Mozilla but not IE. IE exposes this final style as a currentStyle property on element. Hence you could change your code to:-

alert ('style.display=' +document.getElementById('divx').currentStyle.display)

This would work on IE but not on Firefox for which you could use:-

alert ('style.display=' + getComputedStyle(document.getElementById('divx'), null).display)

Note also the IE supports another rule level on an element via a runtimeStyle property. Javascript can assign values for style attributes on this property and these have an even higher precedence than the style property. However I wouldn't recommend using it since only IE supports it.

--
Anthony Jones - MVP ASP/ASP.NET

.

Relevant Pages

  • Re: Macro Control
    ... wasn't sure if I had to use properties to control the macro itself, ... I want it to take control to display an alert like "Station 1 ... Error CU.xls only has a single sheet that is ONLY used ...
    (microsoft.public.excel.programming)
  • Re: How do I set up an if statement to move to next column each ti
    ... What do you mean by "send an ALERT"? ... email, pop-up message, display the cell ... Display a specific format depending on the value of the data ... - click the Format button and choose a red background ...
    (microsoft.public.excel.programming)
  • Macro Control
    ... Sub SelectSh1() ... Error CU.xls only has a single sheet (called Alert) that is ONLY used ... to display and turn off alerts when required - nothing more. ... My question is how to use properties to ensure that the sheet rotation Macros ...
    (microsoft.public.excel.programming)
  • Re: re:Send OL Mail Item Plain Text Only-VBA in OL2K
    ... display the message and click "Send" manually, ... - Open the message with CDO by its EntryID ... > also in the following paragraphs about alert boxes and their OK ... > A second problem with this CDO code is it does not support the ".To" ...
    (microsoft.public.outlook.program_vba)
Quantcast