Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts

    javascript won't recognize my CSS settings

    I have a div whose CSS I'm setting as follows:

    Code:
    div.services_menu
    {
    display: none;
    position: absolute;
    top: 215px;
    left: 240px;
    overflow: hidden;
    }
    I also have a initPage function that gets called on pageload:

    Code:
    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.

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    726
    Thanks
    35
    Thanked 132 Times in 123 Posts
    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:


    Code:
    if(window.getComputedStyle==undefined){
    	getComputedStyle= function(elem){
    		return elem.currentStyle;
    	}
    }
    var menustyle=getComputedStyle(document.getElementById("services_menu"));
    alert(menustyle.top)
    Last edited by mrhoo; 03-16-2012 at 12:07 AM.

  • #3
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Code:
    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.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by webdev1958 View Post
    Code:
    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).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mrhoo View Post
    1. Is services_menu an id or a class name?
    Both:

    Code:
    <div id="services_menu" class="services_menu">...</div>
    Quote Originally Posted by mrhoo View Post
    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:


    Code:
    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.

  • #6
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    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
    Code:
    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
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #7
    New Coder
    Join Date
    Nov 2011
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks everyone


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •