<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>等待-放飞梦想 &#187; client</title>
	<atom:link href="http://leotheme.cn/tag/client/feed" rel="self" type="application/rss+xml" />
	<link>http://leotheme.cn</link>
	<description>勤现在-乐将来</description>
	<lastBuildDate>Fri, 03 Feb 2012 12:32:54 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>offset、client、scroll相关属性解释</title>
		<link>http://leotheme.cn/javascript/aboutoffset-client-scroll.html</link>
		<comments>http://leotheme.cn/javascript/aboutoffset-client-scroll.html#comments</comments>
		<pubDate>Sat, 09 May 2009 02:35:59 +0000</pubDate>
		<dc:creator>Await</dc:creator>
				<category><![CDATA[前端交互]]></category>
		<category><![CDATA[client]]></category>
		<category><![CDATA[offset]]></category>
		<category><![CDATA[scroll]]></category>

		<guid isPermaLink="false">http://leotheme.cn/?p=410</guid>
		<description><![CDATA[offsetTop 指元素距离上方或上层控件的位置，整型，单位像素。 offsetLeft 指元素距离左方或上层控件的位置，整型，单位像素。 offsetWidth 指元素控件自身的宽度，整型，单位像素。 offsetHeight 指元素控件自身的高度，整型，单位像素。 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth 这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。 这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。 clientHeight 四种浏览器对 clientHeight 的解释都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。 offsetHeight IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。 scrollHeight IE、Opera 认为 [...]<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="雷柏7100 蓝光版无线鼠标" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fleotheme.cn%2Fdiary%2Frapoo-7100-mouse.html&from=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Faboutoffset-client-scroll.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/04/22/6197018.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">雷柏7100 蓝光版无线鼠标</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="不刷新（AJAX）获取文章的内容" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Fajax-load-post-content.html&from=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Faboutoffset-client-scroll.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/04/22/6196490.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">不刷新（AJAX）获取文章的内容</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="主题Dreamy更新到v2.0 [06-18 00:08]" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fleotheme.cn%2Fwordpress%2Fwordpresstheme-dreamy2-0.html&from=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Faboutoffset-client-scroll.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/04/22/6196911.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">主题Dreamy更新到v2.0 [06-18 00:08]</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="给大家介绍个好玩的小游戏——毛毛球" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fleotheme.cn%2Fothes%2Fgame-maomaoqiu.html&from=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Faboutoffset-client-scroll.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/04/22/6196977.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">给大家介绍个好玩的小游戏——毛毛球</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="给网站整了一个小小的ICO了" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fleotheme.cn%2Fothes%2Fblog-png-ico.html&from=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Faboutoffset-client-scroll.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/04/22/6196962.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">给网站整了一个小小的ICO了</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p>offsetTop 指元素距离上方或上层控件的位置，整型，单位像素。</p>
<p>offsetLeft 指元素距离左方或上层控件的位置，整型，单位像素。</p>
<p>offsetWidth 指元素控件自身的宽度，整型，单位像素。</p>
<p>offsetHeight 指元素控件自身的高度，整型，单位像素。</p>
<p>网页可见区域宽：document.body.clientWidth<br />
网页可见区域高：document.body.clientHeight<br />
<span id="more-410"></span><br />
网页可见区域宽：document.body.offsetWidth (包括边线的宽)<br />
网页可见区域高：document.body.offsetHeight (包括边线的宽)<br />
网页正文全文宽：document.body.scrollWidth<br />
网页正文全文高：document.body.scrollHeight<br />
网页被卷去的高：document.body.scrollTop<br />
网页被卷去的左：document.body.scrollLeft<br />
网页正文部分上：window.screenTop<br />
网页正文部分左：window.screenLeft<br />
屏幕分辨率的高：window.screen.height<br />
屏幕分辨率的宽：window.screen.width<br />
屏幕可用工作区高度：window.screen.availHeight<br />
屏幕可用工作区宽度：window.screen.availWidth</p>
<p>这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。</p>
<p>这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。</p>
<p><strong>clientHeight</strong></p>
<p>四种浏览器对 clientHeight 的解释都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。</p>
<p><strong>offsetHeight</strong></p>
<p>IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。<br />
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。</p>
<p><strong>scrollHeight</strong></p>
<p>IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。<br />
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。</p>
<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="功能强大的FLASH Galleryd——dfGallery 2.0" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fleotheme.cn%2Fshare%2Fflash-galleryd-dfgallery-20.html&from=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Faboutoffset-client-scroll.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/04/22/6197154.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">功能强大的FLASH Galleryd——dfGallery 2.0</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="推荐一个可爱的字体——方正喵呜体" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fleotheme.cn%2Fshare%2Ffz_fontmw.html&from=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Faboutoffset-client-scroll.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/04/22/6197351.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">推荐一个可爱的字体——方正喵呜体</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="使用lesscss来编码编写css" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Fuse-lesscss-edit-css.html&from=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Faboutoffset-client-scroll.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/09/24/33763230.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">使用lesscss来编码编写css</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="给大家介绍个好玩的小游戏——毛毛球" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fleotheme.cn%2Fothes%2Fgame-maomaoqiu.html&from=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Faboutoffset-client-scroll.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/04/22/6196977.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">给大家介绍个好玩的小游戏——毛毛球</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="jQuery实现背景图渐变切换" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Fjquery-dragoninteractive-navi.html&from=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Faboutoffset-client-scroll.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/04/22/6197230.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">jQuery实现背景图渐变切换</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table><h3  class="related_post_title">随机日志</h3><ul class="related_post"><li>2009-03-30 -- <a href="http://leotheme.cn/share/libaw-focus.html" title="从篱笆网提取的一个焦点图切换">从篱笆网提取的一个焦点图切换</a> (1)<br /><small>今天群里的一个朋友看到这个焦点图，看了下，还蛮漂亮的，于是提出来分享下。这个焦点图是基于jQuery的。所以很合适放到WordPress里来。而且它的背景图是放在一张图上的。很大，要用的话得把里面焦点...</small></li><li>2011-09-17 -- <a href="http://leotheme.cn/javascript/jsonp-get-json-data.html" title="Jsonp 方式跨域获取 json 数据">Jsonp 方式跨域获取 json 数据</a> (6)<br /><small>这两天一直大折腾这个腾讯微博的广播调用。在胖神的帮助下，总算完成的差不多了。基本上和腾讯微博的页面格式保持一致。
数据来源是用腾讯微博RSS/JSONP格式输出的地址。

http://v.t....</small></li><li>2009-08-28 -- <a href="http://leotheme.cn/javascript/jquery-dragoninteractive-navi.html" title="jQuery实现背景图渐变切换">jQuery实现背景图渐变切换</a> (10)<br /><small>链接的背景图切换一般都用CSS的HOVER来控制，虽然很方便，但效果不怎么酷，没有平滑效果，显得有点突然。在这篇文章里给大家介绍下如何用jQuery来实现一个平滑的渐变式背景切换。效果大家可以看下这个...</small></li><li>2009-07-24 -- <a href="http://leotheme.cn/javascript/ie6-must-die.html" title="能支持IE6的前端更牛，还是敢对IE6说不的更牛？">能支持IE6的前端更牛，还是敢对IE6说不的更牛？</a> (27)<br /><small>作为一个前端，是能够支持更多的浏览器比较牛，还是勇于对IE6说不，更牛一些呢？IE6在其特定历史时期内起到了举足轻重的作用。而如今，是时候让他寿终正寝，离开历史舞台的时候了，他却欲罢还休不离不弃。面对...</small></li><li>2009-07-07 -- <a href="http://leotheme.cn/javascript/nuheshienide-css-gengyiyuedui.html" title="如何使你的CSS样式更易阅读?">如何使你的CSS样式更易阅读?</a> (15)<br /><small>在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...</small></li></ul>]]></content:encoded>
			<wfw:commentRss>http://leotheme.cn/javascript/aboutoffset-client-scroll.html/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

