js获得屏幕,浏览器,网页高度宽代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>网页特效获得屏幕,浏览器,网页高度宽代码</title>

主要使用了document对象关于窗口的一些属性,这些属性的主要功能和用法如下。

要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在netscape下需要使用window的属性;在ie下需要深入document内部对body进行检测;在dom环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

window对象的innerwidth属性包含当前窗口的内部宽度。window对象的innerheight属性包含当前窗口的内部高度。

document对象的body属性对应html文档的标签。document对象的documentelement属性则表示html文档的根节点。

document.body.clientheight表示html文档所在窗口的当前高度。document.body. clientwidth表示html文档所在窗口的当前宽度。

js获得屏幕,浏览器,网页高度宽度

网页可见区域宽: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

屏幕可用工作区宽度:window.screen.availwidth

 

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

 

ie,firefox 差异如下:

 

ie6.0、ff1.06+:

clientwidth = width + padding

clientheight = height + padding

offsetwidth = width + padding + border

offsetheight = height + padding + border

 

ie5.0/5.5:

clientwidth = width - border

clientheight = height - border

offsetwidth = width

offsetheight = height

(需要提一下:css教程中的margin属性,与clientwidth、offsetwidth、clientheight、offsetheight均无关

</head>

<body>
</body>
</html>

时间: 2024-07-29 14:33:27

js获得屏幕,浏览器,网页高度宽代码的相关文章

JS获取屏幕,浏览器窗口大小,网页高度宽度

 本篇文章主要介绍了JS获取屏幕,浏览器窗口大小,网页高度宽度的实现代码.需要的朋友可以过来参考下,希望对大家有所帮助 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:document.body.offsetWidth (包括边线的宽)  网页可见区域高:document.body.offsetHeight (包括边线的宽)  网页正文全文宽:document.body.scrollWi

JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

js获取网页高度程序代码

先来普及一下知识 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document

js 兼容多浏览器的Ajax请求代码示例

例  代码如下 复制代码 var ajax = function() {}; ajax.prototype = {     request: function(method, url, callback, postVars) {         var xhr = this.createXhrObject();         xhr.onreadystatechange = function() {             if (xhr.readyState !== 4) return;  

js判断ie浏览器版本与类型代码

ie8以下  代码如下 复制代码 if(!+[1,])   if(window.attachEvent){ alert("ie")}else if(window.addEventListener){alert("not ie")}else{alert("不支持DHTML")} ie6  代码如下 复制代码 if(document.all) 例子  代码如下 复制代码 <script type="text/javascript&qu

js实现iframe动态调整高度的代码_javascript技巧

复制代码 代码如下: function SetWinHeight(obj)  {  var win=obj;  if (document.getElementById)  {     if (win && !window.opera)     {      if (win.contentDocument && win.contentDocument.body.offsetHeight)       win.height = win.contentDocument.body.

JS实现很实用的对联广告代码(可自适应高度)_javascript技巧

本文实例讲述了JS实现很实用的对联广告代码(可自适应高度).分享给大家供大家参考.具体如下: 这是一款很实用的基于JS+CSS+DIV的网页对联广告代码,自适应网页高度,也就是始终保持在一定调试,这款暂时没有关闭功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-lr-useful-adv-auto-height-codes/ 具体代码如下: <html> <head> <meta http-equiv="

JS获取屏幕、浏览器、网页高度,宽度信息定位

[ad#content]在JS操作DOM的时候,会经常用到浏览器的高度和宽度来调节DOM的位置,这里特别记录一下.  代码如下 复制代码 <script language="javascript"> function getDocumentSize(){ var str = ''; str+=document.body.clientWidth+"rn";//网页可见区域宽 str+=document.body.clientHeight+"rn&

JS和jquery获取各种屏幕的宽度和高度的代码

这篇文章介绍了JS和jquery获取各种屏幕的宽度和高度的代码,有需要的朋友可以参考一下   Javascript: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWi