html大小和浏览器可视区域一样吗,浏览器窗口可视区域大小和网页尺寸和网页卷去的距离与偏移量...
浏览器窗口可视区域大小
获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
二、对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
或者
Document对象的body属性对应HTML文档的
标签
document.body.clientHeight
document.body.clientWidth
在不同浏览器都实用的 JavaScript 方案:
var w=document.documentElement.clientWidth||document.body.clientWidth;var h=document.documentElement.clientHeight|| document.body.clientHeight;
scrollHeight和scrollWidth,获取网页内容高度和宽度。
一、针对IE、Opera:
scrollHeight 是网页内容实际高度,可以小于 clientHeight。
二、针对NS、FF:
scrollHeight 是网页内容高度,不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时,scrollHeight 返回 clientHeight 。
三、浏览器兼容性
var w=document.documentElement.scrollWidth||document.body.scrollWidth;var h=document.documentElement.scrollHeight|| document.body.scrollHeight;
注意:区分大小写
scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。
offsetHeight和offsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变)。
一、值
offsetHeight = clientHeight + 滚动条 + 边框。
二、浏览器兼容性
var w=document.documentElement.offsetWidth||document.body.offsetWidth;var h=document.documentElement.offsetHeight|| document.body.offsetHeight;
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ,即左边灰色的内容。
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ,即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。
注意:
1. 区分大小写
2. offsetParent:布局中设置postion属性(Relative、Absolute、fixed)的父容器,从最近的父节点开始,一层层向上找,直到HTML的body。
来源:https://www.cnblogs.com/lhl66/p/7522342.html
html大小和浏览器可视区域一样吗,浏览器窗口可视区域大小和网页尺寸和网页卷去的距离与偏移量...相关推荐
- 浏览器窗口、网页尺寸
1.浏览器窗口可视区域大小 获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 在不同浏览器都实用的 JavaScript 方案: var w= document.documentEl ...
- Android 系统(49)---Android获取窗口可视区域大小: getWindowVisibleDisplayFrame()
Android获取窗口可视区域大小: getWindowVisibleDisplayFrame() getWindowVisibleDisplayFrame()方法 getWindowVisibleD ...
- html在浏览器中的渲染原理,浏览器渲染原理
为了解决性能的问题. 执行JS有一个JS引擎,那么执行渲染也有一个渲染引擎. 渲染引擎在不同的浏览器中也不是都相同的. 在**Firefox中叫做Gecko,在Chrome和Safari中都是基于We ...
- 浏览器渲染机制面试_浏览器渲染原理
本文目录结构 问题 浏览器渲染原理 渲染过程 1. 浏览器接收到 HTML ⽂件并转换为 DOM 树 当我们打开⼀个⽹⻚时,浏览器都会去请求对应的 HTML ⽂件.虽然平时我 们写代码时都会分为 JS ...
- 32款网页设计和网页开发人员常用的Google chrome浏览器扩展程序
对于网页设计人员或网站开发者来说,更喜欢使用像FF的此类浏览器,原因是其具有强大的辅助插件,可以帮助网页制作与开发提高效率,那么同样对于Google Cchrome浏览器来说也是具有大量的此类插件,本 ...
- 纯CSS实现左右拖拽改变布局大小 使用CSS3中resize属性 水平,垂直拖动元素,改变大小
利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制. webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar ...
- qt 设置ui窗口为固定大小_Qt 设置窗口居中显示和窗体大小
设置窗口居中显示 方法一:在窗口(QWidget类及派生类)的构造函数中添加如下代码: #include //....... QDesktopWidget* desktop = QApplicatio ...
- MFC窗口位置和大小的获取
最近在做一个项目,需要控件随对话框大小的变化而变化,因此需要准确获取对话框窗口.控件的大小和位置. 经过好一番查寻.测试,终于看到了希望.下面是一些获取窗口位置和大小的函数,示例如下: 1.获取屏幕分 ...
- java内存区域_JVM学习之—Java内存区域
为了加深对Java语言的理解,加深对Java虚拟机工作机制.底层特性的了解和掌握,准备在闲暇时间,抽空对<深入理解Java虚拟机 JVM高级特性与最佳实践>一书进行学习.本文是学习此书第2 ...
- BOM 浏览器窗口尺寸 浏览器的弹出层 浏览器的地址栏 浏览器的历史记录 浏览器的版本信息 浏览器的常见事件 浏览器卷去的高度和宽度
浏览器窗口尺寸 + 指的是浏览器可视窗口的尺寸 + 浏览器可能会出现滚动条=> 在一般浏览器中,滚动条算浏览器的一部分=> 在MAC中的safari浏览器上,是不算的 滚动条是隐形的 + ...
最新文章
- 如何使用Java 5 Executor框架创建线程池
- 前端小知识点(6):听了好多闭包,这次可能最懂
- 修改element-ui源码使日期范围date-picker支持年范围选择
- JSON在Android网络交互中的使用方法
- 设计灵感|色彩叠加!这样的海报层次感更强
- 01慕课网《进击Node.js基础(一)》Node.js安装,创建例子
- 图网络笔记-知识补充与node2vec代码注解
- CAD图纸上面缺失的线条如何将其进行补充?
- python自学书-大牛推荐的10本学习 Python 的好书
- 【DP + 卖股票】LeetCode 123. Best Time to Buy and Sell Stock III
- 操作系统原理(七)文件系统
- 计算机网络负载均衡图片,负载均衡计算机网络课程网.ppt
- ADB Interface显示黄色惊叹号怎么办?
- Windows98 win98.bif 文件
- Linux面试题整理
- linux搭建认证服务器,Linux上搭建FreeRadius服务器
- 魔兽世界服务器重置时间,大芒果魔兽世界单机版 如何更改所有副本的重置时间?...
- 如果你的下属不服从你得管理,你会怎么办?
- C#二次开发CAD常用的方法和注意事项
- U3D DotH教程
热门文章
- python_numpy_矩阵乘法multiply()、dot()、 matmul()、 * 、 @ 辨析
- 最新!基于深度学习的图像超分技术一览
- asp.net dev xtraReporting(一)静态页面
- 钉钉自定义机器人 发送文本 换行 \n无效果
- ASP.NET MVC 4 笔记
- Linux之系统信息操作20170330
- socket接口多线程数据传输
- maven项目转eclipse工程的命令:eclipse.bat
- YCrCb444转换成YCrCb422随笔
- 适配器模式C++实现