offsetTop¡¢offsetLeft¡¢offsetWidth¡¢offsetHeight¡¢styleÖеÄÑùʽ
¼ÙÉè obj Ϊij¸ö HTML ¿Ø¼þ¡£
obj.offsetTop Ö¸ obj ¾àÀëÉÏ·½»òÉϲã¿Ø¼þµÄλÖã¬ÕûÐÍ£¬µ¥Î»ÏñËØ¡£
obj.offsetLeft Ö¸ obj ¾àÀë×ó·½»òÉϲã¿Ø¼þµÄλÖã¬ÕûÐÍ£¬µ¥Î»ÏñËØ¡£
obj.offsetWidth Ö¸ obj ¿Ø¼þ×ÔÉíµÄ¿í¶È£¬ÕûÐÍ£¬µ¥Î»ÏñËØ¡£
obj.offsetHeight Ö¸ obj ¿Ø¼þ×ÔÉíµÄ¸ß¶È£¬ÕûÐÍ£¬µ¥Î»ÏñËØ¡£
ÎÒÃǶÔÇ°ÃæÌáµ½µÄ¡°ÉÏ·½»òÉϲ㡱Óë¡°×ó·½»òÉϲ㡱¿Ø¼þ×÷¸ö˵Ã÷¡£
ÀýÈ磺
<div id="tool">
<input type="button" value="Ìá½»">
<input type="button" value="ÖØÖÃ">
</div>
¡°Ìá½»¡±°´Å¥µÄ offsetTop Ö¸¡°Ìá½»¡±°´Å¥¾à¡°tool¡±²ãÉϱ߿òµÄ¾àÀ룬ÒòΪ¾àÆäÉϱß×î½üµÄÊÇ ¡°tool¡± ²ãµÄÉϱ߿ò¡£
¡°ÖØÖá±°´Å¥µÄ offsetTop Ö¸¡°ÖØÖá±°´Å¥¾à¡°tool¡±²ãÉϱ߿òµÄ¾àÀ룬ÒòΪ¾àÆäÉϱß×î½üµÄÊÇ ¡°tool¡± ²ãµÄÉϱ߿ò¡£
¡°Ìá½»¡±°´Å¥µÄ offsetLeft Ö¸¡°Ìá½»¡±°´Å¥¾à¡°tool¡±²ã×ó±ß¿òµÄ¾àÀ룬ÒòΪ¾àÆä×ó±ß×î½üµÄÊÇ ¡°tool¡± ²ãµÄ×ó±ß¿ò¡£
¡°ÖØÖá±°´Å¥µÄ offsetLeft Ö¸¡°ÖØÖá±°´Å¥¾à¡°Ìá½»¡±°´Å¥Óұ߿òµÄ¾àÀ룬ÒòΪ¾àÆä×ó±ß×î½üµÄÊÇ¡°Ìá½»¡±°´Å¥µÄÓұ߿ò¡£
offsetTop ¿ÉÒÔ»ñµÃ HTML ÔªËؾàÀëÉÏ·½»òÍâ²ãÔªËصÄλÖã¬style.top Ò²ÊÇ¿ÉÒԵģ¬¶þÕßµÄÇø±ðÊÇ£º
Ò»¡¢offsetTop ·µ»ØµÄÊÇÊý×Ö£¬¶ø style.top ·µ»ØµÄÊÇ×Ö·û´®£¬³ýÁËÊý×ÖÍ⻹´øÓе¥Î»£ºpx¡£
¶þ¡¢offsetTop Ö»¶Á£¬¶ø style.top ¿É¶Áд¡£
Èý¡¢Èç¹ûûÓиø HTML ÔªËØÖ¸¶¨¹ý top Ñùʽ£¬Ôò style.top ·µ»ØµÄÊÇ¿Õ×Ö·û´®¡£
offsetLeft Óë style.left¡¢offsetWidth Óë style.width¡¢offsetHeight Óë style.height Ò²ÊÇͬÑùµÀÀí¡£
scrollHeight: »ñÈ¡¶ÔÏóµÄ¹ö¶¯¸ß¶È¡£
scrollLeft:ÉèÖûò»ñȡλÓÚ¶ÔÏó×ó±ß½çºÍ´°¿ÚÖÐÄ¿Ç°¿É¼ûÄÚÈݵÄ×î×ó¶ËÖ®¼äµÄ¾àÀë
scrollTop:ÉèÖûò»ñȡλÓÚ¶ÔÏó×¶ËºÍ´°¿ÚÖпɼûÄÚÈݵÄ×¶ËÖ®¼äµÄ¾àÀë
scrollWidth:»ñÈ¡¶ÔÏóµÄ¹ö¶¯¿í¶È
offsetHeight:»ñÈ¡¶ÔÏóÏà¶ÔÓÚ°æÃæ»òÓɸ¸×ø±ê offsetParent ÊôÐÔÖ¸¶¨µÄ¸¸×ø±êµÄ¸ß¶È
offsetLeft:»ñÈ¡¶ÔÏóÏà¶ÔÓÚ°æÃæ»òÓÉ offsetParent ÊôÐÔÖ¸¶¨µÄ¸¸×ø±êµÄ¼ÆËã×ó²àλÖÃ
offsetTop:»ñÈ¡¶ÔÏóÏà¶ÔÓÚ°æÃæ»òÓÉ offsetTop ÊôÐÔÖ¸¶¨µÄ¸¸×ø±êµÄ¼ÆË㶥¶ËλÖÃ
event.clientX Ïà¶ÔÎĵµµÄˮƽ×ù±ê
event.clientY Ïà¶ÔÎĵµµÄ´¹Ö±×ù±ê
event.offsetX Ïà¶ÔÈÝÆ÷µÄˮƽ×ø±ê
event.offsetY Ïà¶ÔÈÝÆ÷µÄ´¹Ö±×ø±ê
document.documentElement.scrollTop ´¹Ö±·½Ïò¹ö¶¯µÄÖµ
event.clientX+document.documentElement.scrollTop Ïà¶ÔÎĵµµÄˮƽ×ù±ê+´¹Ö±·½Ïò¹ö¶¯µÄÁ¿
ÒÔÉÏÖ÷ÒªÖ¸IEÖ®ÖУ¬FireFox²îÒìÈçÏ£º
IE6.0¡¢FF1.06+£º
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5£º
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(ÐèÒªÌáһϣºCSSÖеÄmarginÊôÐÔ£¬ÓëclientWidth¡¢offsetWidth¡¢clientHeight¡¢offsetHeight¾ùÎÞ¹Ø)
ÍƼöÐÅÏ¢
- CSS²¼¾ÖµÄ8¸öÄãÐèÒªÕÆÎյļ¼ÇÉ
- IE6¡¢IE7 ¡¢IE8¡¢FFµÄCSSHack
- ̽¾¿cssÖи÷ÖÖÇé¿öϵÄÔªËصĴ¹Ö±ºÍˮƽ¾ÓÖеÄÎÊÌâ
- YahooÍŶӾÑ飺ÍøÕ¾ÐÔÄÜÓÅ»¯µÄ34Ìõ»Æ½ð·¨Ôò(ת)
- HTMLÖÐÀûÓÃ404½«ÀÏÓòÃûÖض¨Ïòµ½ÐÂÓòÃû
- ÈÃdiv¸¡ÓÚselectÖ®ÉÏ
- ¼¸Æª¹ØÓÚºÐ×ÓÄ£Ð͵ÄÎÄÕ£¬ÈÕºó·½±ã¼ìË÷£º
- Css ÑùʽʹÓþÑé×ܽá
- display:inline-blockµÄÉîÈëÀí½â
- ÈçºÎÔÚÍøÒ³ÖÐǶÈëÌØÊâ×ÖÌå
ÈÈÃÅÐÅÏ¢
- nohup: redirecting stderr to stdou....
- ʹÓÃlog_formatΪNginx·þÎñÆ÷ÉèÖøüÏêϸµÄÈÕÖ¾¸ñʽ
- jquery easyUI--dataGrid-Json
- [Ô´´]·ÂGoogle Reader¡¢ÐÂÀË΢²©¡¢ÌÚѶ΢²©µ....
- ÀûÓÃKeepalived+mysql¹¹½¨¸ß¿ÉÓÃMySQLË«Ö÷×Ô¶....
- Nginx+keepalivedʵÏÖ¸ºÔؾùºâºÍË«»úÈȱ¸¸ß¿ÉÓÃ
- jqueryʵÏÖÒ³Ãæ¼ÓÔؽø¶ÈÌõ
- Rolling cURL: PHP²¢·¢×î¼Ñʵ¼ù
- codeigniter ·ÓÉÖÕ¼«ÓÅ»¯(url rewrite)
- linuxÏÂÉèÖÃsshÎÞÃÜÂëµÇ¼
×î½ü¸üÐÂ
- ´ó±¥ÑÛ¸£ 7¿îÀàÐ͸÷ÒìµÄCSS3ʵÓò˵¥
- div+css¶àä¯ÀÀÆ÷²âÊÔ·½·¨
- cssËõд¸øÍøÕ¾¼ÓËÙ£¬ÆäʵºÜ¶àʱºò¶¼»áÓõ½
- ´¿CSS´òÔìBubbleÆøÅÝÌáʾ¿ò
- CSSʵÏÖͼƬ°´±ÈÀýËõ·Å
- CSS¼¼ÇÉÈÃÄãµÄÍøÕ¾¸üÉÏÒ»²ãÂ¥
- ¹Ì¶¨¸ß¶Èdiv,ËæÄÚÈÝ×Ô¶¯±ä¸ßcss¶¨Òå·½·¨
- web¼æÈݸ÷¸öä¯ÀÀÆ÷×îС¸ß¶ÈµÄд·¨
- CSS£¬Ç³ÎöpositionÖÐRelativeºÍAbsolute
- 12ÌõÔÔò£º±£³ÖHTML´úÂëÕû½à&¹æ·¶
ÆÀÂÛ