Javascript页面宽度高度

baotantea

baotantea

2016-02-19 21:24

今天图老师小编要向大家分享个Javascript页面宽度高度教程,过程简单易学,相信聪明的你一定能轻松get!

  关于获取各种浏览器可见窗口大小的一点点研究

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

在我本地测试当中:

在IE、FireFox、Opera下都可以使用

document.body.clientWidth
document.body.clientHeight

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

即可获得,很简单,很方便。

而在公司项目当中:

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高)

真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。

展开更多 50%)
分享

猜你喜欢

Javascript页面宽度高度

Web开发
Javascript页面宽度高度

准确获得页面、窗口高度及宽度的JS

Web开发
准确获得页面、窗口高度及宽度的JS

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery 得到当前页面高度和宽度的两个函数

Web开发
jquery 得到当前页面高度和宽度的两个函数

IE6奇数宽度或高度的BUG

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
IE6奇数宽度或高度的BUG

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

通过ifame指向的页面高度调整iframe的高度

Web开发
通过ifame指向的页面高度调整iframe的高度

获取页面高度窗口高度滚动条高度等参数值getPageSize,getPageScroll

Web开发
获取页面高度窗口高度滚动条高度等参数值getPageSize,getPageScroll

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

哪些版本可以免费升级win10

哪些版本可以免费升级win10

怎样解决MySQL 5.0.16的乱码问题

怎样解决MySQL 5.0.16的乱码问题
下拉加载更多内容 ↓