当前位置:首页 > IT技术

jq和js关于width、clientWidth、offsetWidth、scrollWidth 等的差异

时间:2019-06-25 11:42:06来源:IT技术作者:SEO探针小编阅读:65次「手机版」
 

clientwidth

JQuery中:

width()方法用于获得元素宽度;

innerWidth()方法用于获得包括内边界(padding)的元素宽度;

outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度;

如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来,即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。

同理,innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。

所以说:对于同一个元素应该是:width()<=innerWidth()<=outerWidth()<=outerWidth(true);

JS中:

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

1、offsetWidth width+padding+border)

当前对象的宽度。

style.width也是当前对象的宽度(width+padding+border)。

区别:1)style.width返回值除了数字外还带有单位px;

  2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,

 style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值;

  3)如果没有给 HTML 元素指定过 width样式,则 style.width 返回的是空字符串;

2、offsetHeight :(Height+padding+border)

当前对象的高度。

style.height也是当前对象的高度(height+padding+border)。

区别:1)style.height返回值除了数字外还带有单位px;

  2)如对象的高度设定值为百分比高度,则无论页面变高还是变矮,

 style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值;

  3)如果没有给 HTML 元素指定过 height样式,则 style.height返回的是空字符串;

3、offsetLeft :

当前对象到其上级层左边的距离。

不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性。

style.left当前对象到其上级层左边的距离。

区别:1)style.left返回值除了数字外还带有单位px;

  2)如对象到其上级层左边的距离设定值为百分比,

 style.left返回此百分比,而offsetLeft则返回到其上级层左边的距离的值;

  3)如果没有给 HTML 元素指定过 left样式,则 style.left返回的是空字符串;

4、offsetTop :

当前对象到其上级层顶部边的距离。

不能对其进行赋值.设置对象到上级层顶部边的距离请用style.top属性。

style.top当前对象到其上级层顶部边的距离。

区别:1)style.top返回值除了数字外还带有单位px;

  2)如对象到其上级层顶部边的距离设定值为百分比,

 style.top返回此百分比,而offsetTop则返回到其上级顶部边的距离的值;

  3)如果没有给 HTML 元素指定过 top样式,则 style.top返回的是空字符串;

注意:如果上级层为body,由于IE、FF对padding、margin的解释不一样所以要明确规定处理不是下列的区别就不成立了。

IE   1)如果Div的上级层是body,而p与body之间有个p,如body->p->po;po的offsetTop=p的padding+margin+boder;

  2)如果Div的上级层是body,如body>po;po的offsetTop=p的padding+margin+boder;

这po的offsetTop=po的margin >body.padding则为po的margin,否则为body.padding谁大是谁?

FF  上述两种情况:offsetTop=margin+padding ;

(IE与FF中的body默认padding为10)在IE6.0 FF3.6.13

5、scrollWidth:获取对象的滚动宽度 。

6、scrollHeight: 获取对象的滚动高度。

7、scrollLeft:设置或获取位于对象左边界和对象中目前可见内容的最左端之间的距离(width+padding为一体)

8、scrollTop:设置或获取位于对象最顶端和对象中可见内容的最顶端之间的距离;(height+padding为一体)

9、clientWidth: 获取对象可见内容的宽度,不包括滚动条,不包括边框;

10、clientHeight: 获取对象可见内容的高度,不包括滚动条,不包括边框;

11、clientLeft: 获取对象的border宽度

12、clientTop:获取对象的border高度

13、offsetParent :当前对象的上级层对象.

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

以上属性测试的文档类型为:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果不写文档类型,浏览器就会按照 HTML 4.0 的方式来处理,则效果可能不同。

复制代码

 1 //outerWidth();//jquery中的方法;
 2 
 3 //offsetWidth js属性,是获取不到隐藏元素的值;就是说对于display:none;的获取不到;
 4 
 5 $(function(){
 6 
 7     //alert( $('#p1').get(0).offsetWidth );
 8     
 9     alert( $('#p1').outerWidth() );
10 
11 });

复制代码

转载地址:http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.html

相关阅读

jquery — parent.document,父窗口弹窗写法

$('.attachment', parent.document).click(function(e){ _layer.open({ t

图片裁剪之JQuery Crop

前言:很长时间没写图片裁剪,碰到了诸多问题,今特此记录,以免后面再遇到类似情况 插件GitHub网址:https://github.com/fengyuanchen/cro

jquery操作select(取值,设置选中)

最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料一、基础取值问题例如<select class="selector"></select>

JQuery的submitHandler

之前做表单验证,有设置submitHandlersubmitHandler: function(){$("form").submit();}这样表单验证通过后会自动提交。。。。改为s

JQuery给textarea取值和赋值

JQuery给textarea取值和赋值取值var qrcodefortemcontent=$("#qrcodefortemcontent").val();赋值$("#qrcodefortemcontent").val(

分享到:

栏目导航

推荐阅读

热门阅读