`
txf2004
  • 浏览: 6874708 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

offsetHeight,clientHeight,height

 
阅读更多

offsetHeight:包括内容、内边距、边框的高度

clientHeight:包括内容、内边距的高度


看一下下边的css定义后的效果

.game-opt {
margin-top: 10px;
margin-bottom: 10px;
padding-top: 3px;
height: 20px;
border: solid 1px;

}


>> $('.game-opt')[0].clientHeight
23 (height+paddingTop)
>> $('.game-opt')[0].offsetHeight
25 (height+borderTop+borderBottom+paddingTop)

分享到:
评论

相关推荐

    解析offsetHeight,clientHeight,scrollHeight之间的区别

    在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传...其计算方式为clientHeight = topPadding + bottomPadding+ height – scrollbar.height。 offsetHeight在IE6,IE7,IE8以及最新的的FF, Chr

    clientHeight

    四种浏览器对_clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth_和_scrollWidth_的解

    详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理

    尺寸相关:offsetHeight、clientHeight、scrollHeight; 偏移相关:offsetTop、clientTop、scrollTop、pageYOffset、scrollY; 获取相对视口位置:Element.getBoundingClientRect(); 获取元素的style对象:...

    JS大全 web编程

    scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解 2009年12月14日,16:58:19 | ArthurXF ...(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

    JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记

    clientHeight可以用公式 CSS height + CSS padding – 水平滚动条的高度 (如果存在) 来计算。 如图,这样一个div,它的clientHeight为95,计算:50(height)+30(padding-top)+30(padding-bottom)-15(经测量滚动条...

    js中不同的height, top的区别对比

    每次看到js中的 clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到这些已经不 值一两次了,然后每次都要查看一下各自的区别,才能决定使用哪个...

    js实现在已有的网站中添加飞翔图片不影响之前布局

    height = document.body.clientHeight; Hoffset = dd.offsetHeight; Woffset = dd.offsetWidth; dd.style.left = xPos + document.body.scrollLeft; dd.style.top = yPos + document.body.scrollTop; if (yon) { ...

    js 实现飘动土层代码

    height = document.body.clientHeight; Hoffset = img.offsetHeight; Woffset = img.offsetWidth; img.style.left = xPos + document.body.scrollLeft; img.style.top = yPos + document.body.scrollTop; if (yon) {...

    挺好的浮动广告,用于初学的

    height = document.body.clientHeight; Hoffset = img1.offsetHeight; Woffset = img1.offsetWidth; img1.style.left = xPos + document.body.scrollLeft; img1.style.top = yPos + document.body.scrollTop; ...

    scrollLeft,scrollTop等等详解.pdf

    网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body....

    JavaScript中的各种宽高属性的实现

    在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight、offsetHeight、scrollHeight、availHeight、scrollLeft、scrollTop、style.height、innerHeight、outerHeight、scree.height等等……这么多,傻傻分...

    js关于不同浏览器的不同之处

    关于clientHeight、offsetHeight、scrollHeight window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width 返回当前屏幕宽度(分辨率值) ...

    iframeless:自动调整 iframe 的大小以匹配其内容的高度并且根本没有滚动条

    iframe.height = Math.max( iframe.contentDocument.body.scrollHeight || 0, iframe.contentDocument.body.offsetHeight || 0, iframe.contentDocument.clientHeight || 0, iframe.contentDocument....

    JavaScript中的一些定位属性[图解]

    有这张图就够了,简单地说明一下 以Height为例,Width同理: div.clientHeight:可见窗口除去了margin+border之后的长度。 div.offsetHeight:在div.clientHeight的基础上加了border和滚动条的长度。 div....

    JS获取一个未知DIV高度的方法

    var height = element.clientHeight; 这种做法的局限: 1. 如果元素的display属性设置为none, 那么得到的结果为0 2. 在safari浏览器中,需要使用:element.offsetHeight得到实际高度,这是safari浏览器的bug 下面是...

    图片放大镜

    'top' : Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName('div')[0].style.height) / 2,0),this.clientHeight - this.getElementsByTagName('div')[0].offsetHeight) + 'px', ...

    原生JS获取元素的位置与尺寸实现方法

    clientHeight 2、外高度,外宽度: 边框 + 内边距 + 内容框 offsetWidth offsetHeight 3、上边框、左边框 clientTop clientLeft 4、元素的大小及其相对于视口的位置 getBoundingClientRect() //x\y:元素的左上角和父...

    JS获取IMG图片高宽的简单实例

    前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小...obj.style.width(height); obj.offsetWidth(offsetHeight); obj.clientWidth(clientHeight); getComputedStyle 与 currentStyle; obj.naturalWidth(nat

    js style动态设置table高度

    直接在table标签中设置下不就行了吗?这是静态的,如果要动态设置你会吗?...var head1Height = document.getElementById( "head1" ).offsetHeight; var head2Height = document.getElementById( "head2

    关于元素的尺寸(dimensions) 说明

    元素占据的物理空间的尺寸 如果你需要获得元素占据的物理空间,那么使用offsetHeight和offsetWidth。 自然而然此物理空间必然包含的有:padding、滚动条、border。这两个属性与getBoundingClientRect()的height和...

Global site tag (gtag.js) - Google Analytics