There's a lot wrong with the code.
Code:
document.getElementById('whatever').style.top
Is always an empty value unless the element's top style property was previously set inline, either hard coded or via javascript. To get other style settings such as those from the stylesheet(s), you need the computed style (most browsers) or the current style (IE less than 9 and IE 9 or greater when in quirks mode).
And, your style selector:
is setting the style for any div element(s) with with a class of services_menu, not an id of services_menu. So even if you could get the style from the stylesheet in the way you are doing, it's not set for an element with that id. It set for any elements with that class.
For something straightforward like top, it's fairly easy to get it once you have the right element:
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function initPage()
{
var menu = document.getElementById("services_menu");
var menuItems = menu.getElementsByTagName("div");
alert("top = " +
(window.getComputedStyle?
document.defaultView.getComputedStyle(menu, null).getPropertyValue('top') :
menu.currentStyle['top'])
);
}
onload = initPage;
</script>
<style type="text/css">
div#services_menu
{
display: none;
position: absolute;
top: 215px;
left: 240px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="services_menu"></div>
</body>
</html>
But for other style properties there can be considerations that complicate the situation. For more info, see:
http://www.dynamicdrive.com/forums/blog.php?b=41
Edit: Some other later thoughts . . .
I was just looking back over this and it occurred to me that there's another way of looking at this issue. You could 'ask' for the element's offsetTop. Once again you have to have the correct element in that defining the element's class and then querying about it via id still won't work with this or any method. That said, you can do:
Code:
<script type="text/javascript">
function initPage()
{
var menu = document.getElementById("services_menu");
var menuItems = menu.getElementsByTagName("div");
alert("top = " + menu.offsetTop);
}
onload = initPage;
</script>
But what this tells you isn't the style, rather where the browser has positioned the element visa vis it's offsetParent in some browsers or the body in others. If the element is absolutely positioned though and it's immediate parent is the body, it's a good cross browser way to get the distance from the top. And if it's not positioned absolutely and a direct descendant of the body, things can be done to determine a) it's distance from the top of the page, or b) from the top of its offsetParent. But the code for these has to be written to take account of the differences in browsers. And the offsetTop for any element that's display: none; as is this one is 0. You can overcome that by using visibility: hidden; instead.
Further, if one is using jQuery things get much easier. The computed/current style is (for id="services_menu"):
Code:
$('#services_menu').css('top')
And to get the offset from the top of the page (this and the others below still require the element not to be display: none;):
Code:
$('#services_menu').offset().top
from the top of its offsetParent:
Code:
$('#services_menu').position().top
For any of these, if one wants them for the class="services_menu", the following may be used to retrieve the element:
Code:
$('.services_menu')
Here however, if there are more than one as there can be with class, only the first one's style/position is returned.
javascript not recognizing my CSS settings
Reply With Quote
Originally Posted by jscheuer1
Bookmarks