关于窗口和文档的几个属性！

时间：2014-05-04 09:59:24 阅读：337 评论：0 收藏：0 [点我收藏+]

1.屏幕（screen 属性）

　　Window 对象的screen属性引用的是Screen对象，他有width , height 属性，分别指定的是以像素计的屏幕的宽高，而 availWidth availHeight 指的是实际可用的宽和高（他们排出了桌面任务栏这些特性所用的宽高）。

2 浏览器可视区大小（所谓可视区域是指能看得见的区域，即在浏览器中能看到页面的区域（高度与宽度）。）

在标准浏览器中，可以使用window 的innerWidth 和innerHeight属性（IE支持IE9以及更高）

window.innerWidth

  
window.innerHeight   （如果浏览器有滚动条  ，则包括滚动条的边栏所占的几像素的宽高）

在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小：

　　document.documentElement.clientWidth

    
document.documentElement.clientHeight  （如果浏览器有滚动条  ，不会包括滚动条的边栏所占的几像素的宽高）

在没有声明DOCTYPE的IE中，浏览器显示窗口大小只能以下获取：

　  document.body.offsetWidth  
 document.body.offsetHeight
 
3. 文档坐标和视口坐标
　 
元素的位置是像素来度量的，向右代表X增加，向下代表Y增加，针对框架页中显示的文档，视口是定义了框架页的<iframe>元素，文档坐标比视口坐标更加基础，并且在用户滚动时候不会发生任何变化。
　为了在坐标系之间进行转换，我们需要判定浏览器窗口中的滚动条位置。
　在IE9以及更高或者其他现在浏览器中，Window对象的pageXoffset , 
pageYoffset提供这些值，
  也可以通过 
查询文档的根节点（document.documentElement）的 scrollLeft scrollTop 来获取。但是在怪异模式下，必须使用 
 document.body 上来查询他们。
　下面是一个  以X 有来返回滚动条偏移量的。
　function getScrollOffset(w){
　var w = w || window;
　
//除了IE8以及更早版本，所有浏览器都可以用
  if(w.pageXoffset !== null){ return {x: 
w.pageXOffset, y: w.pageYOffset}};
//对于标准模式下的IE（或其他任何浏览器）
var d = w.document;
if(window.compatMode == 
"CSS1Compat"){
　　return {x: d.documentElement.scrollLeft, y: 
d.documentElement.scrollTop};    //  但是谷歌浏览器不认识这厮， 
但是可以通过 document.body 来获取。
// 对于怪异模式下的浏览器 
return {x: d.body.scrollLeft, y: 
scrollTop}
}
　}
 
4. 元素尺寸

关于窗口和文档的几个属性！,布布扣,bubuko.com

关于窗口和文档的几个属性！

标签：style class code color width get

原文地址：http://www.cnblogs.com/a-go/p/3705837.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行