...

View Full Version : javascript won't recognize my CSS settings



gib65
03-15-2012, 11:28 PM
I have a div whose CSS I'm setting as follows:



div.services_menu
{
display: none;
position: absolute;
top: 215px;
left: 240px;
overflow: hidden;
}


I also have a initPage function that gets called on pageload:



function initPage()
{
var menu = document.getElementById("services_menu");
var menuItems = menu.getElementsByTagName("div");

alert("top = " + menu.style.top);
}


The above CSS applies to menu. The alert box tells me:

top =

So menu.style.top is not set to anything even though I explicitely set it in my CSS. Why is this?

Note: I've verified that menu.style.top is still blank even well after the page loads, just to be sure that it's not an issue with CSS being read/processed after the initPage script is read/processed.

mrhoo
03-15-2012, 11:52 PM
1. Is services_menu an id or a class name?

if it is an id, change your stylesheet declaration from

div.services_menu to #services_menu


2. styles not set inline are not set in the elements style property, but in its computedStyle or currentStyle property.
If services_menu is an id, and it has a declaration in a stylesheet:



if(window.getComputedStyle==undefined){
getComputedStyle= function(elem){
return elem.currentStyle;
}
}
var menustyle=getComputedStyle(document.getElementById("services_menu"));
alert(menustyle.top)

webdev1958
03-16-2012, 12:01 AM
alert("top = " + menu.style.top);You can't use the style property to "read" styles for an element.

The style property only assigns an inline style to the element and so it does not appear in the "stylesheet". There are other ways to get the rendered styles of elements, a couple of which are mentioned by mrhoo.

felgall
03-16-2012, 02:24 AM
alert("top = " + menu.style.top);You can't use the style property to "read" styles for an element.

You can if they are ones you previously put there with JavaScript - where you'd be able to read back in the value you last put there (which should still be the correct value).

gib65
03-16-2012, 07:36 PM
1. Is services_menu an id or a class name?

Both:



<div id="services_menu" class="services_menu">...</div>




2. styles not set inline are not set in the elements style property, but in its computedStyle or currentStyle property.
If services_menu is an id, and it has a declaration in a stylesheet:



if(window.getComputedStyle==undefined){
getComputedStyle= function(elem){
return elem.currentStyle;
}
}
var menustyle=getComputedStyle(document.getElementById("services_menu"));
alert(menustyle.top)

That's wonderful!

However, this only works in IE and Opera (they use currentStyle). In Firefox, Safari, and Chrome, both currentStyle and computedStyle are undefined.

blaze4218
03-16-2012, 08:19 PM
If you are still just asking the why I believe posts #3 & #4 have answered that.
If you are looking for an alternative el.offsetTop has always done me well.
But between getComputedStyle and currentStyle, you should have had a value returned...

try this version

function getStyle(el,styleProp)
{
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}
the origin of, and explanation for this script can be found here http://www.quirksmode.org/dom/getstyles.html

gib65
03-20-2012, 03:12 PM
Thanks everyone



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum