当前位置: 首页 > news >正文

JS 获取页面html信息

IE中:

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

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高)

没有定义W3C的标准,则

IE为:

document.documentElement.clientWidth ==> 0

document.documentElement.clientHeight ==> 0

FireFox为:

document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

Opera为:

document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

 

 

 

 

网页可见区域宽: 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 相对文档的水平座标+垂直方向滚动的量

 

实现代码

  < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>请调整浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">

</meta></head>

<body>

<h2 align="center">请调整浏览器窗口大小</h2><hr />

<form action="#" method="get" name="form1" id="form1">

<!--显示浏览器窗口的实际尺寸-->

浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />

浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br />

</form>

<script type="text/javascript">

<!--

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.οnresize=findDimensions;

//-->

</script>

</body>

</html>

转载于:https://www.cnblogs.com/mrt-yyy/p/4449980.html

相关文章:

  • 悟系统规则
  • solr自动提示 - jquery ui autocomplete
  • SQL SERVER中查找某个字段位于哪些表
  • cdoj 847 方老师与栈 火车进出战问题
  • OpenGL绘制简单的时钟(首发测试)
  • VMware workstation 6.5安装Red Hat Linux 9
  • great C++ socket library
  • Android手机分辨率基础知识(DPI,DIP计算)
  • WebApi2官网学习记录---单元测试
  • redhat9 内核由2.4.20-8至2.6.10全过程
  • stdarg.h详解
  • C# 6.0 的那些事
  • C#脚本实践(一)
  • 【Python】excel
  • ASP.NET配置KindEditor文本编辑器 【转载】
  • #Java异常处理
  • HTTP传输编码增加了传输量,只为解决这一个问题 | 实用 HTTP
  • IP路由与转发
  • Java 实战开发之spring、logback配置及chrome开发神器(六)
  • Java方法详解
  • laravel5.5 视图共享数据
  • React-redux的原理以及使用
  • Shadow DOM 内部构造及如何构建独立组件
  • 阿里云应用高可用服务公测发布
  • 关于Android中设置闹钟的相对比较完善的解决方案
  • 老板让我十分钟上手nx-admin
  • 力扣(LeetCode)21
  • 目录与文件属性:编写ls
  • 如何实现 font-size 的响应式
  • 实战|智能家居行业移动应用性能分析
  • 微信开放平台全网发布【失败】的几点排查方法
  • 智能网联汽车信息安全
  • python最赚钱的4个方向,你最心动的是哪个?
  • ### Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLTr
  • (8)STL算法之替换
  • (day6) 319. 灯泡开关
  • (delphi11最新学习资料) Object Pascal 学习笔记---第2章第五节(日期和时间)
  • (solr系列:一)使用tomcat部署solr服务
  • (编译到47%失败)to be deleted
  • (翻译)Entity Framework技巧系列之七 - Tip 26 – 28
  • (附源码)springboot太原学院贫困生申请管理系统 毕业设计 101517
  • (十)c52学习之旅-定时器实验
  • (算法二)滑动窗口
  • (完整代码)R语言中利用SVM-RFE机器学习算法筛选关键因子
  • (转)利用PHP的debug_backtrace函数,实现PHP文件权限管理、动态加载 【反射】...
  • (总结)Linux下的暴力密码在线破解工具Hydra详解
  • .NET 2.0中新增的一些TryGet,TryParse等方法
  • /*在DataTable中更新、删除数据*/
  • @TableLogic注解说明,以及对增删改查的影响
  • [20190401]关于semtimedop函数调用.txt
  • [ACM] hdu 1201 18岁生日
  • [AIGC] 如何建立和优化你的工作流?
  • [Android开源]EasySharedPreferences:优雅的进行SharedPreferences数据存储操作
  • [bzoj1324]Exca王者之剑_最小割
  • [caffe(二)]Python加载训练caffe模型并进行测试1