JS的宽度问题

最新推荐文章于 2020-11-21 23:31:29 发布
最新推荐文章于 2020-11-21 23:31:29 发布
阅读量339 收藏
点赞数
分类专栏： JavaScript 文章标签： 工作 firefox opera xhtml ie html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lin_lujian/article/details/6914150
版权
  
document.documentElement.clientHeight IE下为0. 
加上: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
则没问题。 
否则用body

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



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

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

幸福的小木鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中各种的宽度高度（width，height）的总结
11-18 3393
这次发表的是JS获取元素各种宽高的细节分析 https://www.imooc.com/learn/608 是对慕课网中的这节课的总结与手记，和一些不同的见解，加上自己理解后，进行了实践，之后编写了这篇文章 1.window的宽高 innerWidth : 浏览器的内部...
threejs设置宽度线例子
06-10
在Three.js这个强大的JavaScript 3D库中，创建带宽度线和动态连续的箭头线是一种常见的需求，尤其是在构建交互式3D场景时。本文将深入探讨如何利用Three.js实现这一功能。 首先，理解Three.js的基本概念至关重要。...
JS中宽度和高度
weixin_37745913的博客
08-30 340
借用一下别人博客中的一张图片 1、屏幕尺寸 screen.height: 屏幕高度（在显示比例为100%时，屏幕高度和宽度和分辨率是一样的） screen.width: 屏幕宽度 screen.avaiHeight: 屏幕可用高度（screen.height - 上下侧任务栏的高度） screen.availWidth:屏幕可用宽度（screen.height - 左右侧任务栏的宽...
Js 内各种宽度
cczhumin的博客
02-25 360
网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth 网页正文全文高： document.body.scrollHeight 网页被卷去的高： document.body.sc
js中的各种宽度计算
weixin_30851867的博客
12-05 498
offsetWidth/clientWidth/width的区别 转载于:https://www.cnblogs.com/knuzy/p/10069387.html
JS04 JS中元素的宽度、高度和位置
多啦的博客
01-20 702
摘要 获取宽度、高度和位置的方法都只对可见元素有效吗，无法获取display:none的元素的信息 在所有的浏览器中，如果你想获取视窗可见部分的高度，应该使用clientHeight 如果要获取页面的scrollTop不能使用document.body.scrollTop，而要使用document.documentElement.scrollTop Element.getBoundingCli
js实现文本框宽度自适应文本宽度的方法
10-23
主要介绍了js实现文本框宽度自适应文本宽度的方法,可实现根据文本框内容动态改变宽度的功能,涉及javascript动态操作页面元素属性的技巧,需要的朋友可以参考下
使用js解决由border属性引起的div宽度问题
10-26
在标题提到的问题中，我们遇到了一个使用 JavaScript 解决 `border` 引起的 `div` 宽度问题的实例。 首先，我们需要理解 `border`、`width` 和 `offsetWidth` 这几个概念： 1. **Border**：边框，是元素周围的一条...
JS使用canvas中的measureText方法测量字体宽度示例
10-17
主要介绍了JS使用canvas中的measureText方法测量字体宽度,结合实例形式分析了canvas的measureText方法相关使用技巧,需要的朋友可以参考下
原生JS获取元素集合的子元素宽度实例
10-20
本文主要对原生JS获取元素集合的子元素宽度的实现方法进行介绍，代码详细，具有很好的参考价值，需要的朋友一起来看下吧
js获取高度宽度的方法
DAYDAYUP
08-23 2796
总结一下，js获取屏幕、视口或者DOM元素高度宽度的方法 屏幕分辨率 window.screen.height window.screen.width 浏览器的屏幕的可用宽度（不包括任务栏） window.screen.availWidth window.screen.availHeight 网页可见区域 document.body.clientWidth do...
Js获取页面的各种宽高与距离
weixin_43743804的博客
04-04 636
1、screen系列 screen.width:      屏幕的宽度 screen.height:     屏幕的高度 2、style系列（必须是行内设置的样式才有效） element.style.width:     当前对象的宽度 element.style.height:    当前对象的高度 &...
图解JavaScript中的各种宽度高度属性
lianfengzhidie的博客
01-27 806
1.与window相关的宽高属性 1.1 window.location和document.location window对象的location属性引用的是location对象，表示该窗口中当前显示文档的URL document的对象的location属性也是引用location对象 所以 window.location === document.location //true 1.2 w...
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
chelen_jak的专栏
10-29 709
原文出处：https://www.imooc.com/article/17571 每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下： clientHeight和offsetHeight属...
js获取屏幕宽度方法大全
热门推荐
weixin_44959182的博客
11-21 1万+
js获取当前屏幕宽度方法 可见域：即可以被显示出来的区域，由起高度大小决定，包括所有内边距、滚动条（被滚动出去的内容）和边框大小。 网页可见域宽（不包括边框）：document.body.clientWidth 包括内容和内边距，整个文档宽度，即使被卷出去挡住的 网页可见域高（不包括边框）：document.body.clientHeight 包括内容和内边距，整个文档高度，即使被卷出去挡住的 网页可见域宽（包括边框）：document.body.offsetWidth 包括内容、内边距、边框，整个文档
JS设置DIV的宽度
bamboo_cqh的博客
07-10 1万+
今天做Web系统的js部分，发现在FireFox浏览器(以下简称FF)里，对div的height设定无效；而IE就没有问题。 先是用$("#scorll"+val+"").attr("width","500"); $("#scorll"+val+"").attr("width","500px"); $("#scorll"+val+"").attr("width","500px
Javascript、Jquery获取浏览器和屏幕各种高度宽度
QAQ_Monk的博客
09-24 379
Javascript:   IE中： document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见
js高度宽度自适应
qqnbsp的博客
10-10 3975
1.根据浏览器大小DIV自适应，首先我们需要获取浏览器的高度和宽度。 var autoWidth; var autoHeight; function autodivsize(){ //函数：获取尺寸 //获取浏览器窗口高度 if (window.innerHeight) autoHeight = window.innerHeight; else i...
exceljs 宽度自适应
最新发布
05-16
要使 ExcelJS 中的单元格宽度自适应，可以使用 `worksheet.columns` 属性来设置列的宽度。这个属性是一个数组，包含每一列的定义。你可以在这个数组中为每一列定义一个宽度，或者使用 `null` 或 `undefined` 表示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值