clientwidth(clientWidth、offsetWidth、clientHeight、offsetHeight 高手详细解释!)
本文目录
clientWidth、offsetWidth、clientHeight、offsetHeight 高手详细解释!
四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异网页可见区域宽: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 的解释都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。offsetHeightIE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。scrollHeightIE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。简单地说clientHeight 就是透过浏览器看内容的这个区域高度。NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。同理clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。注:以上也是转的,对自己有点参考而已,有些值要跟据页面方式而定!我用的Ajax就完全没法用上面的方法定高!javaScript窗口属性:网页可见区域宽: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在IE、FireFox、Opera下都可以使用document.body.clientWidthdocument.body.clientHeight即可获得,很简单,很方便。而在公司项目当中:Opera仍然使用document.body.clientWidthdocument.body.clientHeight可是IE和FireFox则使用document.documentElement.clientWidthdocument.documentElement.clientHeight原来是W3C的标准在作怪啊http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"》如果在页面中添加这行标记的话在IE中:document.body.clientWidth ==》 BODY对象宽度document.body.clientHeight ==》 BODY对象高度document.documentElement.clientWidth ==》 可见区域宽度document.documentElement.clientHeight ==》 可见区域高度注:在IE中“可见区域”基本不认可body,而必需使用documentElement!!!!在FireFox中:document.body.clientWidth ==》 BODY对象宽度document.body.clientHeight ==》 BODY对象高度document.documentElement.clientWidth ==》 可见区域宽度document.documentElement.clientHeight ==》 可见区域高度在Opera中: document.body.clientWidth ==》 可见区域宽度document.body.clientHeight ==》 可见区域高度document.documentElement.clientWidth ==》 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==》 页面对象高度(即BODY对象高度加上Margin高)获取窗口高宽:var w= document.documentElement.offsetWidth;var h=document.documentElement.offsetHeight;
clientWidth等指的是什么
scrollWidth是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)clientWidth是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。offsetWidth是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。scrollHeight: 获取对象的滚动高度。offsetHeight:获取对象相对于版面或由父坐标scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离offsetLeft:获取对象相对于版面或由scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离offsetTop 属性指定的父坐标的计算顶端位置offsetParent 属性指定的父坐标的高度offsetParent 属性指定的父坐标的计算左侧位置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 + paddingoffsetWidth = width + padding + borderoffsetHeight = height + padding + borderIE5.0/5.5:clientWidth = width - borderclientHeight = height - border
更多文章:
rising是什么文件(Rising是不是瑞星杀毒软件的文件名)
2024年2月15日 21:15
海通炒股软件下载(海通同花顺炒股软件,我的是诺基亚5233,请问对应的下载的软件是)
2024年6月2日 09:30
facebook vpn(苹果ipad怎么登录facebook)
2024年8月5日 14:20
国家标准网是什么意思?国家标准网全文公开系统的加密pdf文件怎么打开
2024年9月10日 05:40
nba2006修改器(NBA2006中为什么用了修改器,球员都看不见了)
2024年7月31日 23:20
java applet(请问学会了JAVA后可以开发APP了吗)
2024年4月30日 21:45
悟空和贝吉塔都踏入了神之领域,你感觉他们还会老死吗?口袋妖怪漆黑的魅影神之领域分别分布哪(具体)
2024年6月20日 12:18
侠客风云传手游破解版(跪求侠客风云传的破解版或者破解补丁!)
2024年9月12日 10:25