网页Screen width、height、availWidth、availHeight属性

时间:2021-08-28 01:48:24

*screen.width

  功能:声明了显示浏览器的屏幕的宽度,以像素计。

  语法:screen.width

*screen.height

  功能:声明了显示浏览器的屏幕的可用宽度,以像素计。

  语法:screen.availWidth

*screen.availWidth

  功能:声明了显示浏览器的屏幕的可用宽度,以像素计。

  语法:screen.availWidth

*screen.availHeight

  功能:声明了显示浏览器的屏幕的可用高度,以像素计。这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间。

  语法:screen.availHeight

*实例1

  获取浏览器的宽度、高度、可用宽度、可用高度。

  <script type="text/javascript">
  document.write( "屏幕宽度:"+screen.width+"px<br />" );
  document.write( "屏幕高度:"+screen.height+"px<br />" );
  document.write( "屏幕可用宽度:"+screen.availWidth+"px<br />" );
  document.write( "屏幕可用高度:"+screen.availHeight+"px" );
  </script>

  这段代码的效果为:

  屏幕宽度:1440px
  屏幕高度:900px
  屏幕可用宽度:1440px
  屏幕可用高度:870px

*更多

  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 相对文档的水平座标+垂直方向滚动的量

 这里是JavaScript中建造迁移转变代码的常用属性
  页可见区域宽: 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;