首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

clientWidth和clientHeight总是为ie7返回零

在这个问答内容中,我们要讨论的是clientWidthclientHeight这两个属性在Internet Explorer 7(IE7)中为什么总是返回零的问题。这两个属性分别表示元素的可见宽度和高度,包括内边距(padding)和滚动条(scrollbar),但不包括边框(border)和外边距(margin)。

首先,我们需要了解的是,Internet Explorer 7(IE7)是一个已经过时的浏览器,它的市场份额已经非常小,因此在现代开发中,我们通常不再考虑兼容性问题。然而,如果您确实需要解决这个问题,可以尝试以下方法:

  1. 使用offsetWidthoffsetHeight属性替代clientWidthclientHeight。这两个属性包括边框和滚动条,但不包括内边距和外边距。
代码语言:javascript
复制
var width = element.offsetWidth;
var height = element.offsetHeight;
  1. 使用getComputedStyle方法获取元素的样式,然后计算它的可见宽度和高度。
代码语言:javascript
复制
var style = window.getComputedStyle(element, null);
var width = parseInt(style.width, 10) + parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
var height = parseInt(style.height, 10) + parseInt(style.paddingTop, 10) + parseInt(style.paddingBottom, 10);

需要注意的是,以上方法可能在不同浏览器中的兼容性不同,因此在实际开发中,建议使用现代浏览器,如Google Chrome、Mozilla Firefox、Microsoft Edge等,以获得更好的兼容性和性能。

推荐的腾讯云相关产品:

  • 腾讯云服务器:提供弹性、可扩展的云计算服务,满足不同场景的业务需求。
  • 腾讯云数据库:提供多种数据库服务,包括关系型数据库、非关系型数据库等。
  • 腾讯云API网关:帮助用户更高效地管理API,提供API创建、发布、运维、监控等功能。
  • 腾讯云云储存:提供可靠、安全、高效的云存储服务,支持对象、块、文件等存储类型。

产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

解析offsetHeight,clientHeight,scrollHeight之间的区别「建议收藏」

其计算方式clientHeight = topPadding + bottomPadding+ height – scrollbar.height。...注: 以上都是对于一般元素而方言的,bodydocumentElement的clientHeight, offsetHeightscrollHeight在各个浏览器中的计算方式又不同。...IE7IE7中,body上设置的滚动条并不是窗口的滚动条,这个需要注意。...documentElement 在IE6中,与IE7类似,虽然body上设置的滚动条并不是窗口的滚动条,但它的clientHeightoffsetHeight还算与其它浏览器想统一。...同理 clientWidth、offsetWidth scrollWidth 的解释与上面相同,只是把高度换成宽度即可。 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。

45210

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

而在公司项目当中: Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IEFireFox则使用 document.documentElement.clientWidth...而如果没有定义W3C的标准,则 IE: document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight...利用这个属性可以单独处理以像素单位的数值. 7.style:posLetf: 返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em...LEFT: 从左向右移的位置,即挂件距离屏幕左边缘的距离; clientLeft 返回对象的offsetLeft属性值到当前窗口左边的真实值之间的距离 offsetLeft 返回对象相对于父级对象的布局或坐标的...left值,就是以父级对象左上角坐标原点,向右向下为X、Y轴正方向的x坐标 pixelLeft 设置或返回对象相对于窗口左边的位置 scrollWidth 是对象的实际内容的宽,不包边线宽度

6.6K20

scrollwidthclientwidth_vue监听页面滚动

同理 clientWidth、offsetWidth scrollWidth 的解释与上面相同,只是把高度换成宽度即可。...1.clientHeight, clientWidth: 这两个属性大体上显示了元素内容的象素高度宽度.理论上说这些测量不考虑任何通过样式表加入 元素中的页边距,边框等. 2.clientLeft...利用这个属性可以单独处理以像素单位的数值. 7.style:posLetf: 返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如...LEFT: 从左向右移的位置,即挂件距离屏幕左边缘的距离; clientLeft 返回对象的offsetLeft属性值到当前窗口左边的真实值之间的距离 offsetLeft 返回对象相对于父级对象的布局或坐标的...left值,就是以父级对象左上角坐标原点,向右向下为X、Y轴正方向的x坐标 pixelLeft 设置或返回对象相对于窗口左边的位置 scrollWidth 是对象的实际内容的宽,不包边线宽度

1.7K10

干货丨JS 经典实例收集整理

==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight...综上 1、document.documentElement.scrollTopdocument.body.scrollTop始终有一个0,所以可以用这两个的来求scrollTop 2、scrollHeight...、clientHeight 在DTD已声明的情况下用documentElement,未声明的情况下用body clientHeight 在IEFF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度...五、PageXclientX PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置参考点...,除了IE7,它只支持十六进制表示法 在角度弧度之间转换 var rad = degrees*(Math.PI/180);var degrees = rad*(180/Math.PI); 十二、数组部分

1.3K20

JavaScript 基于offsetHeightclientHeight判断是否出现滚动条

HTMLEelement.offsetHeight简介 HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距边框,且是一个整数。...简介 这个属性是只读属性,对于没有定义CSS或者内联布局盒子的元素0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框外边距。.../docs/Web/API/Element/clientHeight HTMLEelement.offsetWidth简介 是一个只读属性,返回一个元素的布局宽度。...简介 内联元素以及没有 CSS 样式的元素的 clientWidth 属性值 0。...Element.clientWidth 属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有)、边框外边距。

1.3K30

再谈BOMDOM(5):各个大流浪器DOMBOM里面的那些坑—兼容性

pageX/Y获取到的是触发点相对文档区域左上角距离,以页面参考点,不随滑动条移动而变化 问题二:在IE 中,event 对象有 x, y 属性(事件发生的位置的 x 坐标 y 坐标)火狐中没有。...document.documentElement.clientWidth : document.body.clientWidth)     h = (document.documentElement.clientHeight...document.documentElement.clientHeight : document.body.clientHeight)   } else {     w = window.innerWidth... || document.body.clientWidth var h = window.innerHeight || document.documentElement.clientHeight || ...document.body.clientHeight 对于 IE 6、7、8的方案如下: document.documentElement.clientHeightdocument.documentElement.clientWidth

93140

你记住JS中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX吗?

offsetWidth //返回元素的宽度(包括元素宽度、内边距边框,不包括外边距)offsetHeight //返回元素的高度(包括元素高度、内边距边框,不包括外边距)clientWidth //...返回元素的宽度(包括元素宽度、内边距,不包括边框外边距)clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框外边距)style.width //返回元素的宽度(包括元素宽度...),无溢出的情况,与clientWidth相同scrollHeigh //返回元素的高度(包括元素高度、内边距溢出尺寸,不包括边框外边距),无溢出的情况,与clientHeight相同style.width...返回的是字符串,如28px,offsetWidth返回的是数值28;style.width/style.height与scrollWidth/scrollHeight是可读写的属性,clientWidth.../clientHeight与offsetWidth/offsetHeight是只读属性style.width的值需要事先定义,否则取到的值空。

88140

跨浏览器获取不同环境的window窗口宽度高度

在IE9+、SafariFirefox中,outerWidth outerHeight 返回浏览器窗口本身的尺寸(无论是从最外层的window对象还是从某个框架访问)。...在IE、Firefox、Safari、OperaChrome中, document.documentElement.clientWidth document.documentElement.clientHeight...在IE6中,这些属性必须在标准模式下才有效,如果是混杂模式,就必须通过 document.body.clientWidth document.body.clientHeight 取得相同信息。...而对于混杂模式下的Chrome,则无论通过 document.documentElement 还是 document.body 中的 clientWidthclientHeight 属性,都可以取得视口的大小... = document.body.clientWidth;          pageHeight = document.body.clientHeight;      }  } 注:对于移动设备, window.innerWidth

2.6K10
领券