摘要:获得各种宽高的属性还有公式网页可见区域高滚动条宽度测试的文字网页可见区域宽滚动条宽度测试的文字的总高度滚动条宽度边框宽度测试的文字的总宽度滚动条宽度边框宽度测试的文字的解释元素内容高度的度量,包括由于溢出导致的视图中不可见内容滚动总高度
获得各种宽高的属性还有公式
body { padding: 50px; height: 500px; border: 1px dotted red; overflow: scroll; } span { color: blue; }现在我们来动态监视它们的变化 添加各种监听事件来监听当浏览器大小发生改变时各种数据的变化规律网页可见区域高document.body.clientHeight=height + padding * 2- 滚动条宽度测试的文字12网页可见区域宽document.body.clientWidth=width + padding * 2- 滚动条宽度测试的文字12body的总高度document.body.offsetHeight= height+border*2+padding*2 = clientHeight + 滚动条宽度 + 边框宽度*2测试的文字12body的总宽度document.body.offsetWidth= width+border*2+padding*2 = clientWidth + 滚动条宽度 + 边框宽度*2测试的文字12scrollHeight的MDN解释:元素内容高度的度量,包括由于溢出导致的视图中不可见内容滚动总高度document.body.scrollHeight测试的文字12滚动的高度document.body.scrollTop测试的文字12滚动总宽度document.body.scrollWidth测试的文字12浏览器可视窗口的高度,不包括边框、工具栏、调试窗口(可变)window.innerHeight测试的文字12浏览器可视窗口的宽度,不包括边框(可变)window.innerWidth测试的文字12浏览器窗口的宽度,包括滚动条和边框(可变)window.outerHeight测试的文字12浏览器窗口的高度,包括边框、工具栏(可变)window.outerWidth测试的文字12屏幕物理分辨率高(不变)window.screen.height=window.screen.availHeight+windows上下任务栏测试的文字12屏幕物理分辨率宽(不变)window.screen.width=window.screen.availHeight+windows左右任务栏测试的文字12浏览器窗口的可用高度,不包括windows任务栏(可变)window.screen.availHeight测试的文字12浏览器窗口的可用宽度,不包括windows任务栏(可变)window.screen.availWidth测试的文字12浏览器窗口距离显示屏上部高度(可变) window.screenTop测试的文字12浏览器窗口距离显示屏下部高度(可变) window.screenLeft测试的文字12
function body_scroll(){ console.log(this) console.log(document.body.scrollTop) } window.onload = function () { dataUpdate(); } window.onresize = function () { dataUpdate(); } window.onscroll = function () { console.log("window.onscroll") dataUpdate(); } document.body.onclick =function () { dataUpdate(); }//浏览器位置变化了之后我们点击body来获取变化用原生JS来获取值
function dataUpdate() { var client_height = document.getElementById("span_client_height"); client_height.innerText = document.body.clientHeight||document.documentElement.clientHeight; var client_width = document.getElementById("span_client_width"); client_width.innerText = document.body.clientWidth||document.documentElement.clientWidth; var client_offsetHeight = document.getElementById("span_client_offsetHeight"); client_offsetHeight.innerText = document.body.offsetHeight; var client_offsetWidth = document.getElementById("span_client_offsetWidth"); client_offsetWidth.innerText = document.body.offsetWidth; var client_scrollHeight = document.getElementById("span_client_scrollHeight"); client_scrollHeight.innerText = document.body.scrollHeight; var client_scrollTop = document.getElementById("span_client_scrollTop"); client_scrollTop.innerText = document.body.scrollTop; var client_scrollWidth = document.getElementById("span_client_scrollWidth"); client_scrollWidth.innerText = document.body.scrollWidth; var window_innerHeight = document.getElementById("span_inner_height"); window_innerHeight.innerText = window.innerHeight; var window_innerWidth = document.getElementById("span_inner_width"); window_innerWidth.innerText = window.innerWidth; var window_outerHeight = document.getElementById("span_outer_height"); window_outerHeight.innerText = window.outerHeight; var window_outerWidth = document.getElementById("span_outer_width"); window_outerWidth.innerText = window.outerWidth; var screen_height = document.getElementById("span_screen_height"); screen_height.innerText = window.screen.height; var screen_width = document.getElementById("span_screen_width"); screen_width.innerText = window.screen.width; var screen_availHeight = document.getElementById("span_screen_availHeight"); screen_availHeight.innerText = window.screen.availHeight; var screen_availWidth = document.getElementById("span_screen_availWidth"); screen_availWidth.innerText = window.screen.availWidth; var window_top = document.getElementById("span_window_top") window_top.innerText = window.screenTop var window_left = document.getElementById("span_window_left") window_left.innerText = window.screenLeft }我们可以做进一步的封装,用策略模式写出一个页面宽高检测器
这可以查看http://jianjiacheng.com/brows...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/105212.html
摘要:获得各种宽高的属性还有公式网页可见区域高滚动条宽度测试的文字网页可见区域宽滚动条宽度测试的文字的总高度滚动条宽度边框宽度测试的文字的总宽度滚动条宽度边框宽度测试的文字的解释元素内容高度的度量,包括由于溢出导致的视图中不可见内容滚动总高度 获得各种宽高的属性还有公式 body { padding: 50px; height: 500px; ...
摘要:获得各种宽高的属性还有公式网页可见区域高滚动条宽度测试的文字网页可见区域宽滚动条宽度测试的文字的总高度滚动条宽度边框宽度测试的文字的总宽度滚动条宽度边框宽度测试的文字的解释元素内容高度的度量,包括由于溢出导致的视图中不可见内容滚动总高度 获得各种宽高的属性还有公式 body { padding: 50px; height: 500px; ...
摘要:下各种宽高和下宽高分为挂载在对象和对象下的宽高属性,先说下和的区别对象表示浏览器中打开的窗口,对象可以省略,比如可以简写为对象是对象的一部分,那么我们可以写成,浏览器的文档成为对象下的宽高属性浏览器窗口内部宽度浏览器窗口内部高度浏览器窗口外 JS下各种宽高 Window和Document:JS下宽高分为挂载在Window对象和Document对象下的宽高属性,先说下Window和Do...
摘要:优点是继承了父类的模板,又继承了父类的原型对象,缺点就是父类实例传参,不是子类实例化传参,不符合常规语言的写法使用的方式继承了父类的模板,不继承了父类的原型对象。优点是方便了子类实例传参,缺点就是不继承了父类的原型对 github版本戳,求star,follow 前端目录 HTML相关 CSS相关 JAVASCRIPT相关 DOM相关 HTTP相关 VUE相关 算法相关 网络安全相关...
摘要:优点是继承了父类的模板,又继承了父类的原型对象,缺点就是父类实例传参,不是子类实例化传参,不符合常规语言的写法使用的方式继承了父类的模板,不继承了父类的原型对象。优点是方便了子类实例传参,缺点就是不继承了父类的原型对 github版本戳,求star,follow 前端目录 HTML相关 CSS相关 JAVASCRIPT相关 DOM相关 HTTP相关 VUE相关 算法相关 网络安全相关...
阅读 2988·2023-04-25 20:22
阅读 3304·2019-08-30 11:14
阅读 2558·2019-08-29 13:03
阅读 3152·2019-08-26 13:47
阅读 3185·2019-08-26 10:22
阅读 1238·2019-08-23 18:26
阅读 540·2019-08-23 17:16
阅读 1876·2019-08-23 17:01