javascript获取网页宽高方法汇总

2024-10-02 19:27:24

document.body.clientWidth - 网页可见区域宽
document.body.clientHeight - 网页可见区域高

document.body.offsetWidth - 网页可见区域宽，包括边线和滚动条的宽
document.body.offsetHeight - 网页可见区域高，包括边线和滚动条的高[FF,chrom下是整个页面高，IE opera 下正常]

document.body.scrollWidth - 网页总宽
document.body.scrollHeight - 网页总高

document.body.scrollTop - 有滚动条的时候，向下拖动滚动条，上方不显示的那部分高度
document.body.scrollLeft - 同上

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

window.screenTop - 网页正文部分上[网页文档的最上方距离屏幕最上方的距离，但FF不支持，Chrom,IE,Opera表现都不同，慎用]
window.screenLeft - 网页正文部分左[网页文档的最左方距离屏幕最左方的距离，但FF不支持，Chrom,IE,Opera表现都不同，慎用]

window.screen.height - 屏幕分辨率的高度
window.screen.width - 屏幕分辨率的宽度

window.screen.availHeight - 可用工作区高度[整个屏幕但不包括下方任务栏]
window.screen.availWidth - 可用工作区宽度[整个屏幕的宽度]

window.screen.clorDepth - 屏幕色彩，常用的16,32位等
window.screen.deviceXDPI - 屏幕像素/英寸【IE支持，其它不支持】

JavaScript 获取页面宽高的方法

<script>
function getInfo()
{
  var s = "";
  s += " 网页可见区域宽："+ document.body.clientWidth;
  s += " 网页可见区域高："+ document.body.clientHeight;
  s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
  s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
  s += " 网页正文全文宽："+ document.body.scrollWidth;
  s += " 网页正文全文高："+ document.body.scrollHeight;
  s += " 网页被卷去的高(ff)："+ document.body.scrollTop;
  s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
  s += " 网页被卷去的左："+ document.body.scrollLeft;
  s += " 网页正文部分上："+ window.screenTop;
  s += " 网页正文部分左："+ window.screenLeft;
  s += " 屏幕分辨率的高："+ window.screen.height;
  s += " 屏幕分辨率的宽："+ window.screen.width;
  s += " 屏幕可用工作区高度："+ window.screen.availHeight;
  s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
  s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
  s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
  //alert (s);
}
getInfo();
</script>

在我本地测试当中：
在IE、FireFox、Opera下都可以使用

document.body.clientWidth
document.body.clientHeight

即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用

document.body.clientWidth
document.body.clientHeight

可是IE和FireFox则使用

document.documentElement.clientWidth
document.documentElement.clientHeight

原来是W3C的标准在作怪啊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话

在IE中：

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

在FireFox中：

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

在Opera中：

document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

而如果没有定义W3C的标准，则

IE为：

document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox为：

代码如下:

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

Opera为：

代码如下:

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

以上所述就是本文的全部内容了，希望大家能够喜欢。

纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示

下文以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>我们</title> <s
js 获取屏幕各种宽高的方法(浏览器兼容)

屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网
javascript实现网页中涉及的简易运动（改变宽高、透明度、位置）

平时工作中写网页涉及的运动往往都非常简单,比如改变宽高,透明度,位置,是最常用的几种形式,为了省事,整合了下,于是就有了下面这个东东: 兼容:IE系列.chrome.firefox.opera.Safari.360 /* javascript简易运动 Move.action(dom对象,json格式属性值对,缓动参考值,回调方法) 示例: var box = document.getElementById('Ele'); Move.action(box,{width:500,height:200
js获取图片宽高的方法

本文分享多种js获取图片宽高的方法,并且通过实例进行分析,希望大家从中有所收获. 一.简陋的获取图片方式 // 图片地址后面加时间戳是为了避免缓存 var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 打印 alert('width:'+img.width+',height:'
javascript获取隐藏dom的宽高具体实现

首先clone一个DOM,设置position:absolute,然后设置top为一个比较大的负值,然后使其显示出来,最后获取到了DOM的宽高后,将其remove.具体代码如下:Js代码复制代码代码如下: function getCss(elem, css){ if (window.getComputedStyle) { return window.getComputedStyle(elem, null)[css]; }else if (elem.currentStyle) {
动态改变textbox的宽高的js

复制代码代码如下: <INPUT type="button" value="↓" onclick="document.getElementById('temp10966').style.height=(parseInt (document.getElementById('temp10966').style.height)+150).toString()+'px'"> <INPUT type="button"
原生js获取宽高与jquery获取宽高的方法关系对比

说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> 在原生JS中表示DOM对象:在JQuery中表示JQuery对象 Width -> obj.style.width OffsetWidth -> obj.offsetWidth $width -> obj.width() $innerWidth -> obj.innerWidth() $
JS获取IMG图片高宽的简单实例

前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时,遇到一个问题.不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一个高宽的比例值:趁今天有空我就写了几个demo测试了下,找了下原因:且听我细细说来,如有哪里说的不对的,欢迎拍砖--- 首先获取高宽的方法具我所知有: obj.style.width(height); obj.offsetWidth(offsetHeight); obj.clientWidth(clientHeight); getC
js判断图片加载完成后获取图片实际宽高的方法

本文实例讲述了js判断图片加载完成后获取图片实际宽高的方法.分享给大家供大家参考,具体如下: 通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的.下面的代码就能解决这样的问题: <img src="01.jpg&q
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.body.scr
JS获取图片实际宽高及根据图片大小进行自适应

JS获取图片实际宽高,以及根据图片大小进行自适应复制代码代码如下: <img src="http://xxx.jpg" id="imgs" onload="adapt();"/> 复制代码代码如下: function adapt(){ var tableWidth = $("#imgTable").width(); //表格宽度 var img = new Image(); img.src =$('#imgs
Js获取图片原始宽高的实现代码

如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(img) { var image = new Image(); image.src = img.src; return [image.width,image.height]; } //点击缩略图弹出层,显示原始图片. //获取class为tz_main_box下的所有p标签下的图片img $(".tz_
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等

功能: 1.限制扩展名:只能jpg || jpg和gif 2.限制图片大小:K为单位 3.限制图片宽高:px为单位(要么都有,要么都无) 4.限制已经损坏的图片(没有预览的图片) 5.限制更改过扩展名的图片(比如强制把一个动态的GIF扩展名改为JPG了) 使用限制: 要在InputFile里增加onchange事件,使其选择文件后能在一个img标签里加载出来,否则使用会出错 imglimit.js 复制代码代码如下: function limitImg(){ var img=document.
JS 获取浏览器和屏幕宽高等信息代码

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

javascript获取网页宽高方法汇总

相关推荐

随机推荐