js相对视口的高度_JS 中屏幕、浏览器和文档的高度、宽度和距离

1、各种对象

window.screen - 屏幕，

window - 窗口，

document.documentElement & document.body.parentNode - 文档，

document.body - 文档的主体。

2、各种属性(单位为px)

屏幕

window.screen.availHeight 屏幕可用高度；

window.screen.availWidth 屏幕可用宽度；

window.screen.height 屏幕总高度 = availHeight + 下方任务栏；

window.screen.width 屏幕总宽度 = availWidth + 右方任务栏(如果存在)。

窗口(浏览器)

window.screenLeft & window.screenX 浏览器左边框到屏幕左侧的水平距离；

window.screenTop & window.screenY 浏览器上边框到屏幕上侧的垂直距离；

window.outerHeight / window.outerWidth 窗口外部大小，即整个浏览器的大小；

window.innerHeight / window.innerWidth 窗口内部大小，即视口viwport的大小，包括水平/垂直滚动条；

window.onresize 事件是在 window.innerHeight / window.innerWidth 改变时触发的；

window.pageXOffset & window.scrollX 文档当前在水平方向上被卷掉的像素数；

window.pageYOffset & window.scrollY 文档当前在垂直方向上被卷掉的像素数。

元素

document.documentElement, document.body.parentNode 和 document.body 这三个元素节点都继承了element对象的多个只读的和可写的高度和宽度属性(“=” 右边加‘CSS’的属性为CSS中的属性)：

element.clientHeight = CSS height + CSS padding - height of horizontal scrollbar (if present) 不包括边框，边距和水平滚动条；

element.clientWidth = CSS width + CSS padding - width of vertical scrollbar (if present) 不包括边框，边距和垂直滚动条；

element.clientTop = CSS border-top-width；

element.clientLeft = CSS border-left-width 如果文本方向被设为rtl ，而且左边有垂直滚动条，那么clientLeft包含滚动条宽度，例如：

在CSS中设置文本方向为ltr默认情况：

#rtl{width:100px;height:100px;border:1px solid;direction:ltr;overflow:auto;

}

在CSS中设置文本方向为 rtl ：

#rtl{width:100px;height:100px;border:1px solid;direction:rtl;overflow:auto;

}

在HTML中设置文本方向：

this content will have a constant aspect ratio that varies based on the width.this content will have a constant aspect ratio that varies based on the width.