<?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>Mon, 21 May 2012 09:45:24 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</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="无聊——写了一个TOP10的样式" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Fwordpresstop10.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/6197284.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;">无聊——写了一个TOP10的样式</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="Wondershare Flash SlideShow Builder v4.6.0 绿色版" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fleotheme.cn%2Fshare%2Fwondershare-flash-slideshow-builder-v460-green.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/6197139.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;">Wondershare Flash SlideShow Builder v4.6.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="最佳网页IE浏览器兼容性测试工具(IE6 IE7 IE8共存)" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Fietester.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/6199374.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;">最佳网页IE浏览器兼容性测试工具(IE6 IE7 IE8共存)</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 实现 tab 切换一例" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Fjquery-tab.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/6197250.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 实现 tab 切换一例</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?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" 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="Photoshop打造漂亮的光线效果" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fleotheme.cn%2Fshare%2Fdesign%2Fphotoshopdazaolightline.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/6197182.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;">Photoshop打造漂亮的光线效果</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="Flash CS4 细节" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fleotheme.cn%2Fnews%2Fflash-cs4.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/6197102.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;">Flash CS4 细节</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="WordPress主题：perfct 1.0" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fleotheme.cn%2Fothes%2Fwordpress-themes-perfct.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/22/33021700.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;">WordPress主题：perfct 1.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?url=http%3A%2F%2Fleotheme.cn%2Fshare%2Flibaw-focus.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/6197132.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="AddThis——为你的文章添加一个Share按钮" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect?url=http%3A%2F%2Fleotheme.cn%2Fjavascript%2Fwordpress-bookmarkandshare.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/6197304.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;">AddThis——为你的文章添加一个Share按钮</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems" 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>2011-02-17 -- <a href="http://leotheme.cn/javascript/dom-float-center.html" title="未知宽度容器的居中解决方案">未知宽度容器的居中解决方案</a> (13)<br /><small>
如上图所示的分页，其结构如下：


	
		1/18
		上一页
		1
		2
		3
		...
		18
		下一页
	



在这个结构中，“.pagena...</small></li><li>2008-09-11 -- <a href="http://leotheme.cn/news/operachina.html" title="Opera中国版开发代号：朱雀">Opera中国版开发代号：朱雀</a> (0)<br /><small>

Opera 中国版开发代号已在内部确定，中文名朱雀，英文名Ibis，将基于 Opera 9.60 开发，采用 Presto 2.x 内核。
随着 Ibis 的确定，Opera 中国版正式进入...</small></li><li>2008-08-15 -- <a href="http://leotheme.cn/javascript/quediaolinksdesxk.html" title="去掉链接时虚线框的几个方法">去掉链接时虚线框的几个方法</a> (5)<br /><small>我想很多朋友都遇到这个问题，当点击一个链接的时候，总会出现一个虚线框。
在这介绍几种去除的方法：
1.直接给链接加是onfocus="this.blur()".
链接
2.CSS实现

...</small></li><li>2008-10-27 -- <a href="http://leotheme.cn/wordpress/wordpresscyfunction.html" title="WordPress模板常用调用函数">WordPress模板常用调用函数</a> (2)<br /><small>虽然都是些基本的东西,但今天想要用的时候却记不了怎么多.没办法,只好百度一下.SO...
在这做下笔记,方便以后查询.
WordPress基本模板文件

一套完整的WordPress模板应至少...</small></li><li>2009-06-11 -- <a href="http://leotheme.cn/javascript/jquery-tab.html" title="jQuery 实现 tab 切换一例">jQuery 实现 tab 切换一例</a> (11)<br /><small>对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...</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>

