{"id":258,"date":"2008-04-17T18:08:29","date_gmt":"2008-04-17T10:08:29","guid":{"rendered":"http:\/\/www.code-life.com\/?p=258"},"modified":"2010-12-06T17:45:49","modified_gmt":"2010-12-06T09:45:49","slug":"javascript%e8%8e%b7%e5%8f%96%e5%b1%8f%e5%b9%95%e3%80%81%e6%b5%8f%e8%a7%88%e5%99%a8%e3%80%81%e7%bd%91%e9%a1%b5%e9%ab%98%e5%ba%a6%e5%ae%bd%e5%ba%a6","status":"publish","type":"post","link":"https:\/\/www.code-life.com\/?p=258","title":{"rendered":"JavaScript\u83b7\u53d6\u5c4f\u5e55\u3001\u6d4f\u89c8\u5668\u3001\u7f51\u9875\u9ad8\u5ea6\u5bbd\u5ea6"},"content":{"rendered":"

\u7f51\u9875\u53ef\u89c1\u533a\u57df\u5bbd\uff1adocument.body.clientWidth
\n\u7f51\u9875\u53ef\u89c1\u533a\u57df\u9ad8\uff1adocument.body.clientHeight
\n\u7f51\u9875\u53ef\u89c1\u533a\u57df\u5bbd\uff1adocument.body.offsetWidth\uff08\u5305\u62ec\u8fb9\u7ebf\u7684\u5bbd\uff09
\n\u7f51\u9875\u53ef\u89c1\u533a\u57df\u9ad8\uff1adocument.body.offsetHeight \uff08\u5305\u62ec\u8fb9\u7ebf\u7684\u5bbd\uff09
\n\u7f51\u9875\u6b63\u6587\u5168\u6587\u5bbd\uff1adocument.body.scrollWidth
\n\u7f51\u9875\u6b63\u6587\u5168\u6587\u9ad8\uff1adocument.body.scrollHeight
\n\u7f51\u9875\u88ab\u5377\u53bb\u7684\u9ad8\uff1adocument.body.scrollTop
\n\u7f51\u9875\u88ab\u5377\u53bb\u7684\u5de6\uff1adocument.body.scrollLeft
\n\u7f51\u9875\u6b63\u6587\u90e8\u5206\u4e0a\uff1awindow.screenTop
\n\u7f51\u9875\u6b63\u6587\u90e8\u5206\u5de6\uff1awindow.screenLeft
\n\u5c4f\u5e55\u5206\u8fa8\u7387\u7684\u9ad8\uff1awindow.screen.height
\n\u5c4f\u5e55\u5206\u8fa8\u7387\u7684\u5bbd\uff1awindow.screen.width
\n\u5c4f\u5e55\u53ef\u7528\u5de5\u4f5c\u533a\u9ad8\u5ea6\uff1awindow.screen.availHeight
\n\u5c4f\u5e55\u53ef\u7528\u5de5\u4f5c\u533a\u5bbd\u5ea6\uff1awindow.screen.availWidth<\/p>\n

HTML\u7cbe\u786e\u5b9a\u4f4d\uff1ascrollLeft\uff0cscrollWidth\uff0cclientWidth\uff0coffsetWidth
\nscrollHeight\uff1a\u83b7\u53d6\u5bf9\u8c61\u7684\u6eda\u52a8\u9ad8\u5ea6
\nscrollLeft\uff1a\u8bbe\u7f6e\u6216\u83b7\u53d6\u4f4d\u4e8e\u5bf9\u8c61\u5de6\u8fb9\u754c\u548c\u7a97\u53e3\u4e2d\u76ee\u524d\u53ef\u89c1\u5185\u5bb9\u7684\u6700\u5de6\u7aef\u4e4b\u95f4\u7684\u8ddd\u79bb
\nscrollTop\uff1a\u8bbe\u7f6e\u6216\u83b7\u53d6\u4f4d\u4e8e\u5bf9\u8c61\u6700\u9876\u7aef\u548c\u7a97\u53e3\u4e2d\u53ef\u89c1\u5185\u5bb9\u7684\u6700\u9876\u7aef\u4e4b\u95f4\u7684\u8ddd\u79bb
\nscrollWidth\uff1a\u83b7\u53d6\u5bf9\u8c61\u7684\u6eda\u52a8\u5bbd\u5ea6
\noffsetHeight\uff1a\u83b7\u53d6\u5bf9\u8c61\u76f8\u5bf9\u4e8e\u7248\u9762\u6216\u7531\u7236\u5750\u6807offsetParent\u5c5e\u6027\u6307\u5b9a\u7684\u7236\u5750\u6807\u7684\u9ad8\u5ea6
\noffsetLeft\uff1a\u83b7\u53d6\u5bf9\u8c61\u76f8\u5bf9\u4e8e\u7248\u9762\u6216\u7531offsetParent\u5c5e\u6027\u6307\u5b9a\u7684\u7236\u5750\u6807\u7684\u8ba1\u7b97\u5de6\u4fa7\u4f4d\u7f6e
\noffsetTop\uff1a\u83b7\u53d6\u5bf9\u8c61\u76f8\u5bf9\u4e8e\u7248\u9762\u6216\u7531offsetTop\u5c5e\u6027\u6307\u5b9a\u7684\u7236\u5750\u6807\u7684\u8ba1\u7b97\u9876\u7aef\u4f4d\u7f6e
\nevent.clientX\uff1a\u76f8\u5bf9\u6587\u6863\u7684\u6c34\u5e73\u5ea7\u6807
\nevent.clientY\uff1a\u76f8\u5bf9\u6587\u6863\u7684\u5782\u76f4\u5ea7\u6807
\nevent.offsetX\uff1a\u76f8\u5bf9\u5bb9\u5668\u7684\u6c34\u5e73\u5750\u6807
\nevent.offsetY\uff1a\u76f8\u5bf9\u5bb9\u5668\u7684\u5782\u76f4\u5750\u6807
\ndocument.documentElement.scrollTop\uff1a\u5782\u76f4\u65b9\u5411\u6eda\u52a8\u7684\u503c
\nevent.clientX+document.documentElement.scrollTop\uff1a\u76f8\u5bf9\u6587\u6863\u7684\u6c34\u5e73\u5ea7\u6807+\u5782\u76f4\u65b9\u5411\u6eda\u52a8\u7684\u91cf<\/p>\n

IE\uff0cFireFox \u5dee\u5f02\u5982\u4e0b\uff1a<\/span><\/p>\n

IE6.0\u3001FF1.06+\uff1a
\n<\/span>clientWidth = width + padding
\nclientHeight = height + padding
\noffsetWidth = width + padding + border
\noffsetHeight = height + padding + border<\/p>\n

IE5.0\/5.5\uff1a
\n<\/span>clientWidth = width – border
\nclientHeight = height – border
\noffsetWidth = width
\noffsetHeight = height<\/p>\n

\u9700\u8981\u63d0\u4e00\u4e0b\uff1aCSS\u4e2d\u7684margin\u5c5e\u6027\uff0c\u4e0eclientWidth\u3001offsetWidth\u3001clientHeight\u3001offsetHeight\u5747\u65e0\u5173\u3002<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

\u7f51\u9875\u53ef\u89c1\u533a\u57df\u5bbd\uff1adocument.body.clientWidth \u7f51\u9875\u53ef\u89c1\u533a\u57df … \u7ee7\u7eed\u9605\u8bfb →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,8,7],"tags":[45,44,43,41,42,28,29],"_links":{"self":[{"href":"https:\/\/www.code-life.com\/index.php?rest_route=\/wp\/v2\/posts\/258"}],"collection":[{"href":"https:\/\/www.code-life.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.code-life.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.code-life.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.code-life.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=258"}],"version-history":[{"count":3,"href":"https:\/\/www.code-life.com\/index.php?rest_route=\/wp\/v2\/posts\/258\/revisions"}],"predecessor-version":[{"id":260,"href":"https:\/\/www.code-life.com\/index.php?rest_route=\/wp\/v2\/posts\/258\/revisions\/260"}],"wp:attachment":[{"href":"https:\/\/www.code-life.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.code-life.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.code-life.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}