Jump to content

slideshow: JS cannot return a CSS style left // top value?


tinfanide
 Share

Recommended Posts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>var timer;window.onload = function(){// if the position left and top are not set in JS// the function move cannot alter the left value/*document.getElementById("div").style.left = 0;document.getElementById("div").style.top = 0;*/document.getElementById("div").onmouseover = move;document.getElementById("div").onmouseout = function(){  clearTimeout(timer);};}function move(){clearTimeout(timer);document.getElementById("div").style.left = parseInt(document.getElementById("div").style.left) + 1 + "px";timer = setTimeout(move,10);}</script><style>#div{position: relative; left: 10px; top: 10px;width: 1200px; height: 400px;}.images{width: 400px; height: 400px;float: left;}</style></head><body><div id="div"><img class="images" src="1.jpg" /><img class="images" src="2.jpg" /><img class="images" src="3.jpg" /></div></body></html>

I don't understand the question raised in the comment block.Please help.Thanks.

Link to comment
Share on other sites

If the value isn't set, it won't have a value, of course. The style object starts off with data that was in the style attribute of the element. If you haven't put anything into the style attribute, then the style property won't have anything either.

Link to comment
Share on other sites

If the value isn't set, it won't have a value, of course. The style object starts off with data that was in the style attribute of the element. If you haven't put anything into the style attribute, then the style property won't have anything either.
Yes, understood.But the need is without setting the values in JS, JS should get the values itself from CSS. Here's the fix:
// Reference from:// http://www.quirksmode.org/js/findpos.html  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>window.onload = function(){alert(ElementPosition("div")["currentLeft"]);}function ElementPosition(oID){obj = document.getElementById(oID);var curLeft = curTop = 0;if (obj.offsetParent){  do  {   curLeft += obj.offsetLeft;   curTop += obj.offsetTop;  } while (obj = obj.offsetParent);}return {"currentLeft":curLeft,"currentTop":curTop};}</script><style type="text/css">#div{width: 100px; height: 100px;position: absolute; left: 50px; top: 200px;background-color: #000000;}</style></head><body><div id="div"></div></body></html>

The fix is not perfect, though. People say the offset property is not fully supported in IE8-.Tested in IE7, 8, 9 and FF9. Passed.I am not good with compatibility issue.

Edited by Tin
Link to comment
Share on other sites

I believe offsetLeft and offsetParent are supported all the way back to Internet Explorer 6. Either way, the only way to get data set by the stylesheet is using getComputedStyle() or an equivalent. I'm not sure how well it is supported by older versions of Internet Explorer.

Link to comment
Share on other sites

Yes, millions of years ago a decent guy here took me to a good reference to getComputedStyle():http://www.sophox.com/wordpress/?p=759His reference really helps a lot. This reminds me of that, then.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...