位置: 编程技术 - 正文

javascript窗口宽高,鼠标位置,滚动高度(详细解析)(js设置窗口大小)

编辑:rootadmin

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

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下:

IE6.0、FF1.+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5: clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

-------------------

本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。

要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:

若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;

在IE下需要深入Document内部对body进行检测;

在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。

Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。

Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。

document.body. clientWidth表示HTML文档所在窗口的当前宽度。

实现代码:源程序解读

(1)程序首先建立一个表单,包含两个文本框,用于显示窗口当前的宽度和高度,并且,其数值会随窗口大小的改变而变化。

(2)在随后的JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口的高度值和宽度值。

(3)然后,在函数findDimensions ( )中,使用window.innerHeight和window.innerWidth得到窗口的高度和宽度,并将二者保存在前述两个变量中。

(4)再通过深入Document内部对body进行检测,获取窗口大小,并存储在前述两个变量中。

(5)在函数的最后,通过按名称访问表单元素,结果输出至两个文本框。

(6)在JavaScript代码的最后,通过调用findDimensions ( )函数,完成整个操作。

推荐整理分享javascript窗口宽高,鼠标位置,滚动高度(详细解析)(js设置窗口大小),希望有所帮助,仅作参考,欢迎阅读内容。

javascript窗口宽高,鼠标位置,滚动高度(详细解析)(js设置窗口大小)

文章相关热门搜索词:js设置窗口大小,js设置页面缩放,js设置浏览器窗口大小,js设置窗口大小,js最大化窗口的方法,js 宽度,js设置控件宽度,js设置浏览器窗口大小,内容如对您有帮助,希望把文章链接给更多的朋友!

NodeJS url验证(url-valid)的使用方法 Javascript做url检验,通常是使用正则表达式来判定,其格式是否正确,例如:/^https?:///.test(url);当然还有更好的检测方法比如基于RFC,RFC,RFC,RFC

NodeJS的url截取模块url-extract的使用实例 上次介绍了怎么利用NodeJS+PhantomJS进行截图,但由于对每次截图操作,都启用了一个PhantomJS进程,所以并发量上去后,效率堪忧,所以我们重写了所有代

ExtJS自定义主题(theme)样式详解 本文基于ExtJS4.2.1版本UI组件基础学习ExtJS就是学习组件的使用。ExtJS4对框架进行了重构,其中最重要的就是形成了一个结构及层次分明的组件体系,由这

标签: js设置窗口大小

本文链接地址:https://www.jiuchutong.com/biancheng/373652.html 转载请保留说明!

上一篇:Knockout visible绑定使用方法

下一篇:NodeJS url验证(url-valid)的使用方法(node urlencode)

  • 个人所得税年度汇算清缴怎么操作
  • 企业所得税行业所得率
  • 支付一年房租的会计科目
  • 项目固定资产投资强度
  • 房地产企业借款费用
  • 购买法下的操纵手法有哪些
  • 咨询费成本怎么成本结转
  • 单位结算卡在pos渠道可办理的功能
  • 生产企业原材料的订购与运输论文
  • 已审核已过账已经生成凭证还能修改吗?
  • 农产品初加工免征企业所得税
  • 农产品收购发票上的买价含税吗
  • 汇算清缴补交的税怎么做凭证
  • 关于小规模纳税人的说法错误的有
  • 购进一批材料,材料已经入库
  • 发票校验码后六位在哪个位置图片
  • 一次性收取一年服务费怎么确定收入
  • 业绩补偿协议
  • 个人垫付汽车修理怎么办
  • 2020工会经费退费
  • 退付手续费怎么操作
  • 投入资本回报率是总资产报酬率吗
  • 销售收入的暂估入账
  • 键盘突然打不出来字
  • 开发企业房产税如何征收
  • 购入原材料所发票怎么入
  • 自建房买卖需要缴哪些费用
  • 差旅费津贴为什么不交个人所得税
  • 我想看阿尔伯塔
  • phpstrcmp函数
  • 施工企业成本费用有哪些方面构成
  • 电子承兑汇票支付流程
  • 应交税费已交税金是什么意思
  • 小规模纳税人增值税免税政策
  • openprop教程
  • vue修饰词
  • php环境怎么搭
  • Laravel5权限管理方法详解
  • 企业开负数发票退货后怎么处理?
  • vue路由怎么实现
  • 可以抵扣土地增值税的项目
  • 企业向慈善机构捐款会计分录
  • 工会捐款怎么账务处理
  • 报销员工电话费怎么算
  • wind安装
  • 企业所得税汇算清缴扣除标准2023
  • 金蝶如何新增客户
  • 外国常驻代表机构经费支出范围
  • 收到待报解预算收入是国家退的税吗
  • 预收账款如何做账务处理
  • 产权转移数据印花税子目
  • 企业正常经营的条件
  • 未分配利润核销不良贷款
  • 固定资产折旧如何进行会计处理
  • 小规模纳税人怎么申报增值税报表
  • 废品损失明细账应选择三栏式
  • 探讨探讨
  • mysql密码忘记了怎么找回
  • 台式电脑NUM LOCK键还能亮,算不算死机了
  • windowsxp锁屏密码怎么设置
  • ubuntu系统如何安装qq
  • 联想lenovo小新pro16 2023版
  • find linux命令详解
  • u盘制作iso镜像文件启动
  • linux awk -v
  • win10关闭系统服务
  • nicconfigsvc.exe - nicconfigsvc是什么进程 有什么用
  • 获取windows的最新信息
  • iptables dnat snat
  • win7怎样禁用无线网络连接
  • windows8任务管理器在哪
  • python列表详解
  • opengl api version
  • 流程控制语句java
  • js行号显示的文字不一样
  • 如何开发一个新的向量库
  • jquery解析XML及获取XML节点名称的实现代码
  • 财税专家刘杨简历图片介绍
  • 摩托车的消费税率
  • 纳税人办理汇算清缴
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设