获取浏览器各种可见边框长度

最新推荐文章于 2024-07-24 11:53:01 发布
最新推荐文章于 2024-07-24 11:53:01 发布
阅读量599 收藏
点赞数
分类专栏： javascript技术 文章标签： 浏览器 firefox opera mozilla ie xhtml
总算弄明白了为何用document.body.clientHeight，document.body.offsetHeight都没有办法获取网页可见区域的正确值，原来罪魁祸首是W3C定义的标准！！在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值，下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别：

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

原文地址：http://www.css88.com/article.asp?id=133

判断浏览器的类型：
var ua = navigator.userAgent.toLowerCase ();
var os = new Object();
os.isFirefox = ua.indexOf ("gecko") != -1;
os.isOpera = ua.indexOf ("opera") != -1;
os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;

获取浏览器区域的大小：//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){

  var yScroll;
  if (self.pageYOffset) {
    yScroll = self.pageYOffset;
  } else if (document.documentElement && document.documentElement.scrollTop){  // Explorer 6 Strict
    yScroll = document.documentElement.scrollTop;
  } else if (document.body) {// all other Explorers
    yScroll = document.body.scrollTop;
  }
  arrayPageScroll = new Array('',yScroll)
  return arrayPageScroll;
}
 
//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){
 
  var xScroll, yScroll;
 
  if (windows.innerHeight && window.scrollMaxY) { 
    xScroll = document.body.scrollWidth;
    yScroll = windows.innerHeight + window.scrollMaxY;
  } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
    xScroll = document.body.scrollWidth;
    yScroll = document.body.scrollHeight;
  } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
    xScroll = document.body.offsetWidth;
    yScroll = document.body.offsetHeight;
  }
 
  var windowWidth, windowHeight;
  if (self.innerHeight) {  // all except Explorer
    windowWidth = self.innerWidth;
    windowHeight = self.innerHeight;
  } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
    windowWidth = document.documentElement.clientWidth;
    windowHeight = document.documentElement.clientHeight;
  } else if (document.body) { // other Explorers
    windowWidth = document.body.clientWidth;
    windowHeight = document.body.clientHeight;
  } 
 
  // for small pages with total height less then height of the viewport
  if(yScroll < windowHeight){
    pageHeight = windowHeight;
  } else {
    pageHeight = yScroll;
  }
  // for small pages with total width less then width of the viewport
  if(xScroll < windowWidth){ 
    pageWidth = windowWidth;
  } else {
    pageWidth = xScroll;
  }

  arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
  return arrayPageSize;
}
魔方_小影
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浏览器兼容性汇总
05-09
**解决方案**: 统一采用 `document.getElementById("idName")` 方法来获取DOM元素，以确保代码在不同浏览器中的一致性。 ##### 2. const问题 - **火狐（Firefox）**: 支持使用 `const` 关键字或 `var` 定义常量。 ...
js常用的dom高度长度详细
08-08
- `document.body.clientWidth` 和 `document.body.clientHeight` 分别返回浏览器窗口可见区域的宽度和高度，不包括滚动条。 - `document.body.offsetWidth` 和 `document.body.offsetHeight` 包括了边框，提供了...
html页面上获取列表的长度,HTML页面中JavaScript能获取到的各种屏幕大小信息
weixin_30045751的博客
06-03 646
在HTML页面中，通过JavaScript代码访问 window 对象，能够获取到很多表征屏幕大小的信息，下面列举并加以区分。window 对象中的屏幕信息window.innerheight、 window.innerwidth只读属性，以像素计浏览器窗口的文档显示区的高度和宽度不包括菜单栏、工具栏以及滚动条等的高度IE8以下不支持这些属性，用 document.documentElement ...
各种浏览器下如何用js获取各种宽和高
wll52的专栏
08-26 622
各种浏览器下如何用js获取各种宽和高
浏览器的各种位置值获取
weixin_34258838的博客
08-11 376
获取网页的大小 一张网页的全部面积，就是它的大小，通常是由内容和css样式表决定的。浏览器窗口的大小，是在浏览器中看到的那部分网页面积。又叫做viewport（视口）。如果网页的内容能够在浏览器窗口中全部显示（也就是不出现滚动条），那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示，则滚动浏览器窗口，可以显示出网页的各个部分。 浏...
用JS怎么获取浏览器滚动条的宽度
前端界的小学生
07-15 1283
知识点：offsetWidth：获取到的值是width+padding+border； clientWidth： 获取对象可见内容的宽度，不包括滚动条，不包括边框； function getScrollbarWidth() { var odiv = document.createElement('div'),//创建一个div styles = { width: '100px', height: '100px',
HTML 获取屏幕、浏览器、页面的高度宽度
Sayesan的专栏
10-26 8353
  在没有声明DOCTYPE的IE中，浏览器显示窗口大小只能以下获取： document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小： document.documentElement.clientWidth document.documentElement.clientHeigh...
浏览器汇总、可信浏览器
wang13679201813的博客
05-21 1100
文章目录1、浏览器引擎分类：2、浏览器组成3、内核4、浏览器中的进程与线程6、页面渲染流程7、回流与重绘8、优化渲染性能9、输入URL地址，浏览器经历了什么10、浏览器访问网页，第一次加载很慢，第二次刷新明显加快，简述浏览器缓存机制11、如何提升页面性能12、Telnet13、笔记本、台式电脑尺寸及分辨率 1、浏览器引擎分类： 1)，Trident内核，代表产品Internet Explorer，IE内核 2)，Gecko内核，代表作品Mozilla Firefox 3)，WebKit内核，代表作品Safa
获取各种宽高度
qq_39958629的博客
08-24 420
height()：返回当前元素的高度（不含单位，不含边框，不含padding，不含margin） css("height")：返回当前元素的高度，带单位，不含边框，不含padding，不含margin innerHeight()：返回当前元素的高度（包括padding，但是不包括border，window和document不适用） outerheight()：返回当前元素的高度（包括padding...
JS获取页面的各种距离总结
stanwuc的博客
09-20 6151
1.screen系列 screen.width:屏幕的宽度 screen.height:屏幕的高度
JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
Mia_shaungchen的博客
05-11 1255
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth   (包括边线的宽); 网页可见区域高： document.body.offsetHeight  (包括边线的宽); 网页正文全文宽： document.body.scroll
好看的JS表单样式大全.docx
09-14
当输入框获取焦点时，边框颜色在红色和黄色之间切换，给人一种闪烁的感觉。 7. **输入字时输入框边框闪烁（边框为虚线）**：这个示例使用了表达式`expression_r`，仅适用于旧版本的IE浏览器。当输入框获得焦点时，...
js页面跳转方法
01-04
window.location.href 属性可以获取或设置当前页面的 URL。通过设置该属性，可以实现页面的跳转。例如： ```javascript window.location.href = 'https://www.example.com'; ``` 这将跳转到指定的 URL。 2. 使用 ...
PHP实现的封装验证码类详解
10-27
类的实例化时，可以自定义宽度、高度和验证码长度。默认值分别为80像素宽，20像素高，以及4个字符的验证码。 `ValidationCode`类中的`__construct`方法负责初始化这些参数，并计算出干扰颜色的数量。这个数量是基于...
Linux环境docker部署Firefox结合内网穿透远程使用浏览器测试
qq_63320529的博客
07-24 688
Linux环境docker部署Firefox结合内网穿透远程使用浏览器测试
web前端基础面试85题（一）
柯晓楠
07-18 1020
1、什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
pillow-10.4.0-pp39-pypy39_pp73-macosx_11_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
avif-0.5.0-cp35-cp35m-macosx_10_9_x86_64.whl
最新发布
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
border 边框长度
07-27
回答: 在CSS中，可以使用border属性来设置边框的长度。边框的长度可以通过设置border-width属性来实现。如果要设置所有边框的长度相同，可以使用简写形式，例如border-width: 1px;表示所有边框的长度都为1像素。如果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值