得到浏览器窗口和显示器的可用宽高,scroll等的宽高分析

by admin on 2019年8月31日

Javascript:获取浏览器窗口和荧屏的可用宽高

1.收获浏览器窗口的管用宽高(不包涵工具栏和滚动条)

注:对于绝超过百分之五十浏览器选择window.innerWidth就可以获得宽度,使用document.documentElement.clientWidth
|| document.body.clientWidth 为了促成对IE6,7的帮助。

中度同上。

var w=window.innerWidth
  || document.documentElement.clientWidth
  || document.body.clientWidth;

  var h=window.innerHeight
  || document.documentElement.clientHeight
  || document.body.clientHeight;

  x=document.getElementById("screen_size");
  x.innerHTML="浏览器的内部窗口宽度:" + w + ",高度:" + h + "。"

2.拿走显示器的有效性宽高

document.write("屏幕可用尺寸,宽:" + screen.availWidth+",高:"+screen.availHeight);

3.location有关(获取web服务器相关音讯)

    document.write("web 主机的域名: "+location.hostname+"
");
    document.write("当前页面的路径和文件名: "+location.pathname+"
");
    document.write("web 主机的端口: "+location.port+"
");
    document.write("所使用的 web 协议: "+location.protocol+"
");
    document.write("当前页面的url: "+location.href+"
");

1.获取浏览器窗口的平价宽高(不包含工具栏和滚动条)
注:对于绝大多数浏览器选取window….

      
前段时间在做项目中,涉及到收获浏览器和因素的高宽以及有关size。用的时候有些会有模糊,所从前几天就来总计一下~

必发88 1

欣逢三个很意外的主题素材,在选用


忙乱

一.    window对象

window.innerWidth || document.documentElement.clientWidth ||
document.body.clientWidth 浏览器视口宽度(不包罗工具栏和滚动条)

window.inneHeight || document.documentElement.clientHeight ||
document.body.clientHeight 浏览器视口中度(不满含工具栏和滚动条)

window.outerWidth 
浏览器窗口的上升的幅度(满含地址栏工具栏)(IE未有提供取妥帖前浏览器窗口尺寸的属性)

window.outerHeight 浏览器窗口的莫大(富含地址栏工具栏)(IE没有提供取伏贴前浏览器窗口尺寸的属性)

screen.width 显示器幕的增长幅度

screen.height 显示器幕的莫斯中国科学技术大学学

screen.availHeight 再次来到荧屏幕的冲天 (除 Windows 任务栏之外)

screen.availWidth 再次回到显示屏幕的肥瘦 (除 Windows 职责栏之外)

[转]

页可知区域宽: 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;


初稿地址:→传送门

二.  元素

必发88 2

在网络找到这些图。

event.clientX 相对文书档案的品位座标

event.clientY 绝对文书档案的垂直座标

event.offsetX 绝对容器的档期的顺序坐标

event.offsetY 绝对容器的垂直坐标

element.offsetWidth,element.offsetHeight: box 的总大小。蕴涵 border,
padding, content。不富含 margin

element.clientWidth,element.clientHeight: box 中内容区域的高低。包蕴padding, content不包含 margin, border

scrollTop:已滚动过去的中度

scrollHeight:可滚动内容的总中度

offsetLeft:获取对象绝对于版面或由 offsetParent
属性钦定的父坐标的推断左侧地方

offsetTop:获取对象相对于版面或由 offsetTop
属性钦命的父坐标的持筹握算顶部地方

错误之处,还请大家多多指教~~

window相关宽高属性

 

得到浏览器窗口和显示器的可用宽高,scroll等的宽高分析。1. window.outerHeight (窗口的外围的冲天) / window.outerWidth (窗口的外围的小幅)
  • window.outerHeight获得整个浏览器窗口的冲天(单位:像素),包涵左边栏(如若存在)、窗口镶边(window
    chrome)和窗口调正边框。包括调节和测量试验窗及浏览器边框
  • window.outerWidth代表一切浏览器窗口的大幅度,满含侧面栏(要是存在)、窗口镶边(window
    chrome)和调正窗口大小的边框。富含调试窗及浏览器边框
![](https://upload-images.jianshu.io/upload_images/1727565-09555815592f0bb7.png)

window的相关属性

参照链接:
window.outerHeight
-MDN
window.outerWidth-MDN

在javascript和jquery中,都有对各样中度的写法,在此地,我们就非同通常讲一下窗口、文书档案等惊人的精晓。(宽度和可观大约!)。

2. window.innerHeight (浏览器窗口的视口的万丈)和 window.innerWidth
  • window.innerHeight浏览器窗口的视口(viewport)中度(以像素为单位),借使存在水平滚动条,则包蕴它。不含有调节和测量试验窗及浏览器边框
  • window.innerWidth浏览器视口(viewport)宽度(单位:像素),假设存在垂直滚动条则囊括它。不分包调节和测量试验窗及浏览器边框

参照链接:
window.innerHeight –
MDN
window.innerWidth –
MDN

jquery的各个中度

得到浏览器窗口和显示器的可用宽高,scroll等的宽高分析。3. window.screen.widthwindow.screen.height

注:在赢得值时可不加window.前缀

  • window.screen.width注明了显示当前浏览器的屏幕的宽度,以像素计
  • window.screen.height注脚了呈现当前浏览器的屏幕的高度,以像素计

    必发88 3

    window.screen

参照链接:
window.screen –
MDN
window.screen –
MDN

首先来讲一说$(document)和$(window),如下:

4. window.screen.availHeightwindow.screen.availWidth
  • window.screen.availHeight注脚了显示浏览器的屏幕的可用高度,以像素计。除去大家底部任务栏外的显示屏中度
  • window.screen.availWidth证明了体现浏览器的屏幕的可用宽度,以像素计

参照链接:
window.screen –
MDN
window.screen –
MDN

$(document).height();//整个网页的万丈

5. window.screenTopwindow.screenLeft
  • 作用: 再次来到窗口的左上角在荧屏上的x坐标。该属性为只读属性。语法:
    window.screenLeft。注:在Firefox等浏览器中使用的是screenX属性。
  • 回来窗口的左上角在显示器上的y坐标。该属性为只读属性。 语法:
    window.screenTop。注:在Firefox等浏览器中行使的是screenY属性。
![](https://upload-images.jianshu.io/upload_images/1727565-0d26e615e78a1d47.png)

window.screenTop/left

参照链接:
window.screenTop
window.screenLeft

$(window).height();//浏览器可视窗口的可观
$(window).scrollTop();//浏览器可视窗口上方距离网页顶上部分的莫斯中国科学技术大学学(垂直偏移),用一句话驾驭正是:当网页滚动条拉到最低等时,

document上面包车型大巴连带属性(offset/client/scroll)

$(document).height() == $(window).height() +
$(window).scrollTop()注意,是拉到最低等!

与client相关属性

当网页高度不足浏览器窗口时$(document).height()重临的是$(window).height()

6. document.body.clientWidth必发88 ,element.clientWidth
  • 意味着成分的内部宽度,以像素计。该属性包蕴内边距,但不富含垂直滚动条(假若有些话)、边框和外边距。
  • 该属性值会被四舍五入为三个莫西干发型。假如您供给三个小数值,可利用
    element.getBoundingClientRect()。
  • 语法:var intElemClientWidth = element.clientWidth;
![](https://upload-images.jianshu.io/upload_images/1727565-b9c85298f4d69745.png)

document.body.clientWH

参照链接:
Element.clientWidth –
MDN

假使你要拿走整个网页的中度,不建议用$(“html”).height()、$(“body”).height()的莫斯中国科学技术大学学,
原因:
$(“body”).height():body也许会有边框,获取的莫斯科大学会比$(document).height()小;
$(“html”).height():在不相同的浏览器上赢得的可观的意义会有差别,说白了正是浏览器不合作。

7. document.body.clientHeightelement.clientHeight
  • 归来成分内部的惊人(单位像素),包涵内边距,但不满含水平滚动条、边框和各州距。

仿效链接:
element.clientHeight –
MDN

情商这里,谈起边框和margin还会有padding,我们当然想到了jquery的另外的七个惊人,这正是innerHeight()和outerHeight()
innerHeight()和outerHeight()不适用于window 和 document对象,对于window

document对象足以使用.height()代替。innerHeight()和outerHeight()紧要用来获得标签的冲天。
必发88 4

8. document.body.clientLeftelement.clientLeft
  • 意味着贰个因素的侧面框的宽窄,以像素表示。假使成分的文本方向是从右向左(RTL,
    right-to-left),并且鉴于内容溢出导致侧边出现了二个笔直滚动条,则该属性包涵滚动条的大幅。
![](https://upload-images.jianshu.io/upload_images/1727565-0aa014faec459e55.png)

element.clientLT

参谋链接:
Element.clientLeft –
MDN

innerHeight:高度+补白
outerHeight:高度+补白+边框,参数为true时:高度+补白+边框+边距
innerHeight(value)

9. document.body.clientTopelement.clientTop
  • 贰个成分顶上部分边框的宽度(以像素表示)。不包括顶端外边距或内边距。

参照链接:
Element.clientTop

以此“value”参数能够是二个字符串(数字加单位)恐怕是一个数字,固然那些“value”参数只提供叁个数字,jQuery会自动抬高像素单位(px)。要是只提供一个字符串,任何有效的CSS尺寸都可以为中度赋值(就好像100px,
百分之五十, 可能 auto)。注目的在于现世浏览器中,CSS中度属性不富含padding, border,
或然 margin, 除非box-sizingCSS属性被采取。

与offset相关属性

这一对属性指的是因素的border+padding+content的宽窄和冲天

jquery中度,放到浏览器中间试验一下

10. document.body.offsetWidthelement.offsetWidth
  • border/padding/width三者的总增进率
![](https://upload-images.jianshu.io/upload_images/1727565-a44eb7d8cc51e523.png)

offsetWH

参照他事他说加以考察链接:
HTMLElement.offsetWidth

alert($(window).height()); //浏览器当前窗口可视区域中度
alert($(document).height()); //浏览器当前窗口文书档案的可观
alert($(document.body).height()); //浏览器当前窗口文书档案body的莫大
alert($(document.body).outerHeight(true));
//浏览器当前窗口文书档案body的总中度 富含border padding margin
alert($(window).width()); //浏览器当前窗口可视区域上升的幅度
alert($(document).width()); //浏览器当前窗口文书档案对象宽度
alert($(document.body).width()); //浏览器当前窗口文书档案body的宽度
alert($(document.body).outerWidth(true));
//浏览器当前窗口文书档案body的总宽度 包含border padding margin

11. document.body.offsetHeightelement.offsetHeight
  • border/padding/width三者的总中度,且是贰个平头。

参照链接:
HTMLElement.offsetHeight

javascript的各样高度

12. HTMLElement.offsetLeftHTMLElement.offsetTop

这两日天性是基于offsetParent的

  • 即便当前成分的父级成分未有张开CSS定位(position为absolute或relative),offsetParent为body.
  • 一经当前成分的父级元素中有CSS定位,offsetParent取这两天的极度父级成分。
  • offsetLeft重回当前成分左上角相对于 HTMLElement.offsetParent
    节点的右侧界偏移的像素值。
  • offsetTop重临当前成分绝对于其 offsetParent 成分的顶端的偏离。
  • 在IE6/7中:

offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left)
  • 在IE8/9/10及Chrome中:

offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParent的padding-left)+(当前元素的margin-left)
  • 在FireFox中:

offsetLeft=(offsetParent的margin-left)+(当前元素的margin-left)+(offsetParent的padding-left)

参谋链接:
HTMLElement.offsetLeft
HTMLElement.offsetTop

网页可知区域宽[仅针对body]: document.body.clientWidth
网页可知区域高[仅针对body]: document.body.clientHeight
网页可知区域宽[仅针对body]: document.body.offsetWidth
(包括滚动条和边框,若滚动条和边框为0,则和clientWidth相等)
网页可知区域高[仅针对body]: document.body.offsetHeight
(包蕴滚动条和边框,若滚动条和边框为0,则和clientHeight相等)
可视窗口宽度(满含滚动轴宽度):window.innerWidth;
//IE9+、Chrome、Firefox、Opera 以及 Safari
可视窗口高度,不富含浏览器顶上部分工具栏:
window.innerHeight;//IE9+、Chrome、Firefox、Opera 以及 Safari
网页正文全文宽(不富含滚动轴的增长幅度): document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
//假若网页中未有滚动轴,document.body.scrollWidth和window.innerWidth相等,document.body.scrollHeight和window.innerHeight相等。
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
显示器分辨率的高(整个显示屏的可观): window.screen.height
显示器分辨率的宽(整个显示屏的上升的幅度): window.screen.width
显示器可用工作区中度: window.screen.availHeight
荧屏可用专业区宽度: window.screen.availWidth
全部浏览器可用工作区中度: window.outerHeight
整整浏览器可用职业区宽度: window.outerWidth

与scroll相关属性

 

13. document.body.scrollWidthdocument.body.scrollHeight

body与普通element不一样

  • 给定body宽高 < 浏览器窗口时:

scrollWidth = 浏览器窗口宽度
scrollHeight = 浏览器窗口高度
  • 给定body宽高大于浏览器窗口,且剧情小于给定body宽高时:

scrollWidth = 给定的宽度 + body所有padding + body所有margin + body所有border
scrollHeight = 给定的高度 + body所有padding + body所有margin + body所有border
  • 给定body宽高大于浏览器窗口,且剧情高出给定窗口时:

scrollWidth = 内容的宽度 + body所有padding + body所有margin + body所有border
scrollHeight = 内容的高度 + body所有padding + body所有margin + body所有border

参照他事他说加以考察链接:
Element.scrollWidth

14. element.scrollWidthelement.scrollHeight
  • 当无滚动条时:

scrollWidth = clientWidth = 元素宽度 + padding和 
scrollHeight = clientHeight = 元素高度 + padding和
  • 当有滚动条时:

scrollWidth = 实际内容的宽度 + padding和 
scrollHeight  = 实际内容的高度 + padding和
15. document.body.scrollTopdocument.body.scrollLeft
  • 这对质量是可读写(可被重复赋值) 的
  • 指的是当成分当中的内容超过其宽高的时候,成分被卷起来的高和增长幅度。
  • 对此element成分相同适用
16. window.scrollYwindow.scrollX
  • window.scrollY 文书档案从顶上部分开首滚动过的像素值 / window.scrollX
    文书档案从侧面起始滚动的像素值。

event中的多种坐标

  1. clientXclientY:相对于浏览器(可视区左上角0,0)的坐标

  2. screenXscreenY:绝对于设备显示屏左上角(0,0)的坐标

  3. offsetXoffsetY:相对于事件源左上角(0,0)的坐标

  4. pageXpageY:相对于整个网页左上角(0,0)的坐标

仿效来源:
  • 摄像课程:JS/jQuery宽高的接头和行使
  • 博客:JavaScript中的各样宽高属性

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图