1¡¢getBoundingClientRectµÄ×÷ÓÃ
getBoundingClientRectÓÃÓÚ»ñȡij¸öhtmlÔªËØÏà¶ÔÓÚÊÓ´°µÄλÖü¯ºÏ¡£
Ö´ÐÐ object.getBoundingClientRect();»áµÃµ½ÔªËصÄtop¡¢right¡¢bottom¡¢left¡¢width¡¢heightÊôÐÔ£¬ÕâЩÊôÐÔÒÔÒ»¸ö¶ÔÏóµÄ·½Ê½·µ»Ø¡£
getBoundingClientRect()
Õâ¸ö·½·¨·µ»ØÒ»¸ö¾ØÐζÔÏ󣬰üº¬ËĸöÊôÐÔ£ºleft¡¢top¡¢rightºÍbottom¡£·Ö±ð±íʾԪËظ÷±ßÓëÒ³ÃæÉϱߺÍ×ó±ßµÄ¾àÀë¡£
var box=document.getElementById('box'); // »ñÈ¡ÔªËØ alert(box.getBoundingClientRect().top); // ÔªËØÉϱ߾àÀëÒ³ÃæÉϱߵľàÀë alert(box.getBoundingClientRect().right); // ÔªËØÓұ߾àÀëÒ³Ãæ×ó±ßµÄ¾àÀë alert(box.getBoundingClientRect().bottom); // ÔªËØϱ߾àÀëÒ³ÃæÉϱߵľàÀë alert(box.getBoundingClientRect().left); // ÔªËØ×ó±ß¾àÀëÒ³Ãæ×ó±ßµÄ¾àÀë
2.getBoundingClientRectÉÏÏÂ×óÓÒÊôÐÔÖµ½âÊÍ
Ö÷ÒªÊÇleftºÍbottomÒª½âÊÍһϣ¬leftÊÇÖ¸Óұߵ½Ò³Ãæ×î×ó±ßµÄ¾àÀ룬bottomÊÇÖ¸µ×±ßµ½Ò³Ã涥±ßµÄ¾àÀë¡£
¿´Í¼£º
3. ä¯ÀÀÆ÷¼æÈÝÐÔ
ie5ÒÔÉ϶¼ÄÜÖ§³Ö£¬µ«ÊÇÓÖÒ»µãµãµØ·½ÐèÒªÐÞÕýһϣ¬
IE67µÄleft¡¢top»áÉÙ2px,²¢ÇÒûÓÐwidth¡¢heightÊôÐÔ¡£
4¡¢ÀûÓÃgetBoundingClientRectÀ´Ð´Ò»¸ö»ñÈ¡htmlÔªËØÏà¶ÔÓÚÊÓ´°µÄλÖü¯ºÏµÄ·½·¨
<div id="test" style="width: 100px; height: 100px; background: #ddd;"></div> <script> function getObjXy(obj){ var xy = obj.getBoundingClientRect(); var top = xy.top-document.documentElement.clientTop+document.documentElement.scrollTop,//document.documentElement.clientTop ÔÚIE67ÖÐʼÖÕΪ2£¬ÆäËû¸ß¼¶µãµÄä¯ÀÀÆ÷Ϊ0 bottom = xy.bottom, left = xy.left-document.documentElement.clientLeft+document.documentElement.scrollLeft,//document.documentElement.clientLeft ÔÚIE67ÖÐʼÖÕΪ2£¬ÆäËû¸ß¼¶µãµÄä¯ÀÀÆ÷Ϊ0 right = xy.right, width = xy.width||right - left, //IE67²»´æÔÚwidth ʹÓÃright - left»ñµÃ height = xy.height||bottom - top; return { top:top, right:right, bottom:bottom, left:left, width:width, height:height } } var test = getObjXy(document.getElementById('test')); alert("top:" + test.top + ", right:" + test.right + ", bottom:" + test.bottom + ", left:" + test.left); </script>
ÒÔÉϾÍÊDZ¾ÎĵÄÈ«²¿ÄÚÈÝ£¬Ï£Íû¶Ô´ó¼ÒµÄѧϰÓÐËù°ïÖú£¬Ò²Ï£Íû´ó¼Ò¶à¶àÖ§³ÖASPKUÔ´Âë¿â¡£
¡¡