【转】关于top、clientTop、scrollTop、offsetTop等

简介: clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height IE,FireFox 差异如下: IE6.
clientWidth = width - border 
clientHeight = height - border 
offsetWidth = width 
offsetHeight = height 

IE,FireFox 差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding 
clientHeight = height + padding 
offsetWidth = width + padding + border 
offsetHeight = height + padding + border 


IE5.0/5.5:

var winWidth = 0;  
var winHeight = 0;  
function findDimensions() //函数:获取尺寸  
{  //获取窗口宽度  
if (window.innerWidth)  
winWidth = window.innerWidth;  
else if ((document.body) && (document.body.clientWidth))  
winWidth = document.body.clientWidth;  //获取窗口高度  
if (window.innerHeight)  
winHeight = window.innerHeight;  
else if ((document.body) && (document.body.clientHeight))  
winHeight = document.body.clientHeight;  //通过深入Document内部对body进行检测,获取窗口大小  
if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)  
{  
winHeight = document.documentElement.clientHeight;  
winWidth = document.documentElement.clientWidth;  
}  //结果输出至两个文本框  
document.form1.availHeight.value= winHeight;  
document.form1.availWidth.value= winWidth;  
}  findDimensions();  //调用函数,获取数值  
window.onresize=findDimensions; 


网页可见区域宽: 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;

 

 

相关文章
|
3月前
|
关系型数据库 分布式数据库 数据库
又一国赛来啦!第2届PolarDB数据库创新设计赛开放报名!|全国普通高校学科竞赛排行榜入选赛事等你来战
「2025全国大学生计算机系统能力大赛——第2届PolarDB数据库创新设计赛」已启动报名,面向全国高校本、专、硕博学生开放。赛事聚焦PolarDB-PG向量计算优化,设初赛与决赛,总奖金达25万元。旨在提升数据库系统设计与创新能力,推动产学研融合,欢迎踊跃参赛!
|
10月前
|
监控 前端开发 安全
74.8K star!这个开源图标库让界面设计效率提升10倍!
Font Awesome 是全球最受欢迎的图标库和工具包,提供超过2000个免费图标和7000+专业图标,支持网页、桌面应用、移动端等多平台使用。开发者只需几行代码就能为项目添加精美矢量图标,设计师可直接下载SVG进行二次创作。
295 4
|
9月前
|
人工智能 物联网 编译器
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
261 11
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
|
人工智能 搜索推荐 安全
智能家居:AI如何让我们的生活更便捷
智能家居:AI如何让我们的生活更便捷
596 7
|
传感器 安全
透明铝:未来材料的强度与透明度
【10月更文挑战第20天】透明铝是一种由氮氧化铝或氧化铝陶瓷基板制成的透明陶瓷材料,具备高强度和高透明度。本文探讨其基本原理、技术特性、应用领域及未来趋势,揭示其在军事、航空航天、汽车制造和建筑设计等领域的广泛应用前景和巨大潜力。
|
数据可视化 uml Docker
在本地Windows 11 系统的桌面版Docker上搭建PlantUML
在本地Windows 11 系统的桌面版Docker上搭建PlantUML
602 0
|
XML 存储 Android开发
Android实战经验之Kotlin中快速实现MVI架构
本文介绍MVI(Model-View-Intent)架构模式,强调单向数据流与不可变状态管理,提升Android应用的可维护性和可测试性。MVI分为Model(存储数据)、View(展示UI)、Intent(用户动作)、State(UI状态)与ViewModel(处理逻辑)。通过Kotlin示例展示了MVI的实现过程,包括定义Model、State、Intent及创建ViewModel,并在View中观察状态更新UI。
639 12
|
Web App开发 JSON 前端开发
使用 React 和 NodeJS 创建一个全栈项目
在本文中,我将使用 React 和 NodeJS 创建一个全栈项目。介绍下如何让 Node.js 作为 web 服务器来加载静态资源,如何让 React 程序可以直接调用 Node API。
1016 0
|
资源调度 JavaScript 应用服务中间件
VuePress介绍及使用指南
VuePress是一个基于Vue.js的静态网站生成工具,它专注于以Markdown为中心的项目文档。VuePress具有简单易用的特性,同时提供了强大的自定义和扩展性。
402 2
VuePress介绍及使用指南
|
自然语言处理 JavaScript 前端开发
Nodejs 第二十一章(crypto)
Nodejs 第二十一章(crypto)
261 0