tinfanide Posted July 8, 2012 Share Posted July 8, 2012 <!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 More sharing options...
Ingolme Posted July 8, 2012 Share Posted July 8, 2012 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 More sharing options...
tinfanide Posted July 9, 2012 Author Share Posted July 9, 2012 (edited) 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 July 9, 2012 by Tin Link to comment Share on other sites More sharing options...
Ingolme Posted July 9, 2012 Share Posted July 9, 2012 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 More sharing options...
tinfanide Posted July 9, 2012 Author Share Posted July 9, 2012 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now