【转】关于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;

 

 

相关文章
|
2月前
|
关系型数据库 分布式数据库 数据库
又一国赛来啦!第2届PolarDB数据库创新设计赛开放报名!|全国普通高校学科竞赛排行榜入选赛事等你来战
「2025全国大学生计算机系统能力大赛——第2届PolarDB数据库创新设计赛」已启动报名,面向全国高校本、专、硕博学生开放。赛事聚焦PolarDB-PG向量计算优化,设初赛与决赛,总奖金达25万元。旨在提升数据库系统设计与创新能力,推动产学研融合,欢迎踊跃参赛!
|
9月前
|
监控 前端开发 安全
74.8K star!这个开源图标库让界面设计效率提升10倍!
Font Awesome 是全球最受欢迎的图标库和工具包,提供超过2000个免费图标和7000+专业图标,支持网页、桌面应用、移动端等多平台使用。开发者只需几行代码就能为项目添加精美矢量图标,设计师可直接下载SVG进行二次创作。
270 4
|
8月前
|
人工智能 物联网 编译器
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
244 11
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
|
12月前
|
人工智能 搜索推荐 安全
智能家居:AI如何让我们的生活更便捷
智能家居:AI如何让我们的生活更便捷
559 7
|
传感器 安全
透明铝:未来材料的强度与透明度
【10月更文挑战第20天】透明铝是一种由氮氧化铝或氧化铝陶瓷基板制成的透明陶瓷材料,具备高强度和高透明度。本文探讨其基本原理、技术特性、应用领域及未来趋势,揭示其在军事、航空航天、汽车制造和建筑设计等领域的广泛应用前景和巨大潜力。
|
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。
589 12
|
Web App开发 JSON 前端开发
使用 React 和 NodeJS 创建一个全栈项目
在本文中,我将使用 React 和 NodeJS 创建一个全栈项目。介绍下如何让 Node.js 作为 web 服务器来加载静态资源,如何让 React 程序可以直接调用 Node API。
998 0
|
存储 机器学习/深度学习 JSON
【Python考试资源】包含重点知识、坑点知识,期末考试看这一份就够了
本文章总结Python的各类知识,并将知识之间进行对比,对期末考试非常有效
472 0
|
机器学习/深度学习 人工智能 分布式计算
基于组合优化的 3D 家居布局生成看千禧七大数学难题之 NP 问题
本文探讨了运筹学和组合优化方法在 3D 家居布局生成中的应用,并调研了 AI 生成 3D 场景布局的最新方法。文中结合了家居家装业务的实际应用场景,从算法建模和计算复杂度的角度上阐述了室内设计的布局问题中存在的难点,以及如何用简化和近似的思想来建模 3D 布局生成问题,最终展望了生成式 AI 技术对室内设计行业的推动作用
470 0
|
分布式计算 搜索推荐 Java
Maven依赖原则及如何解决Maven依赖冲突
Maven依赖原则及如何解决Maven依赖冲突
710 0