Omirion Posted May 5, 2010 Share Posted May 5, 2010 Hi there, Anyone have any ideas on how i can get position properties using JS? style.left / top etc don't work. They just return nothing. And not even a null or undefined, just an empty string. Quote Link to comment https://forums.phpfreaks.com/topic/200798-geting-css-position-properties/ Share on other sites More sharing options...
Psycho Posted May 6, 2010 Share Posted May 6, 2010 It depends on hos the position is defined and what you are really after. If you have specified the position using in-line CSS properties OR if you have defined the CSS property using javascript, then you can get the value using javascript. If, however, the property is defined in a stylesheet, then javascript cannot get the value. You could probably write some really complext code to get the class or ID from the element and then read the stylesheet to find the appropriate class, and finally parse the properties of the class to find the position. But, that would be a lot of work. Also, if the position is not even defined in the style properties and you are just trying to get the position that can be done, but there are browser compatability issues to contend with. There are some freely available scripts that can do this if you do a littel searching. Anyway, here is an example script that gives four different examples of how the left property is defined. The sample javascript function can obtain the left position for two, but not the other two. <html> <head> <style> #div3 { position: absolute; left:400px; } </style> <script> function test(divID) { var divObj = document.getElementById(divID); alert( divObj.style.left ); } </script> </head> <body> <div id="div1" style="">One - No position defined</div> <div id="div2" style="position:absolute; left:150;">Two - Defined In Line</div> <div id="div3">Three - Defined in style sheet</div> <div id="div4" style="position:absolute;">Four - Defined via javascript</div> <br /><br /><br /> <button onclick="test('div1');">One</button><br /> <button onclick="test('div2');">Two</button><br /> <button onclick="test('div3');">Three</button><br /> <button onclick="test('div4');">Three</button><br /> <script type="text/javascript"> document.getElementById('div4').style.left = '600px'; </script> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/200798-geting-css-position-properties/#findComment-1054241 Share on other sites More sharing options...
Omirion Posted May 10, 2010 Author Share Posted May 10, 2010 Thank you for the lengthy explanation. Yeah wanted to know if there is any way of knowing the properties on an external style sheet. To bad there is no way of getting to it. Thanks mate. Quote Link to comment https://forums.phpfreaks.com/topic/200798-geting-css-position-properties/#findComment-1055654 Share on other sites More sharing options...
Ang3l0fDeath Posted May 10, 2010 Share Posted May 10, 2010 http://www.w3schools.com/css/css_positioning.asp elemObject .style.left=0; elemObject .style.right=0; elemObject .style.top=0; elemObject .style.bottom=0; elemObject .style.position='absolute'; - elemObject .style.position='relative'; elemObject .style.zIndex=1; elemObject .style.height=0; elemObject .style.width=0; Quote Link to comment https://forums.phpfreaks.com/topic/200798-geting-css-position-properties/#findComment-1055849 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.