这两天在写一个js脚本文件来实现对网页内容的位置和大小控制,中间碰到了诸多问题,随着问题刨根问底抓取到了三个非常难以区分的属性:Client,Offset,Scroll,参考了许多资料,将我的理解描述如下。
问题提出:直接用width属性不能够访问到元素的宽度。
<style type="text/css">
/* <![CDATA[ */
#a
{
width:100px;
height:30px;
border:solid blue 1px;
}
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
function getWidth()
{
var bar=document.getElementById("a");
alert(bar.style.width);
}
// ]]>
</script>
<div id="a">
</div>
<input type="button" name="name" value="GetWidth" onclick="getWidth()" />
这样获取不到a块的宽度,搜索之,得到的结论是:当元素宽度是css单独制定的时候,通过这种手段将不能够成功取得其宽度值,但是可以设置。看到这两篇博客,他们的解决办法是采用offsetWidth属性来代替style.width。
http://www.woaicss.com/article/js/jss.htm
http://www.45it.com/javascript/201202/28426.htm
当资料查到这里就很疑惑了,为什么是offsetWidth,这个真的是元素的宽度吗?于是进一步往下查,发现并不是这样的,offsetWidth并不一定就是你想要的宽度值。除了offset,我将三个功能类似的属性offset,client,scroll一并做了了解,对比如下,都包含有*Height,*Width,*Top.*Left四个属性。
Height和Width表示元素块的高度和宽度。
client:包含padding,不包含border,margin和scrollbar部分
offset:包含padding和border,但是不包含margin和scrollbar部分
scroll:包含元素的所有部分。
Top和Left是用于表示元素的位置。
clientLeft:通常指元素的左边框的宽度
offsetLeft:与最近的父元素的距离(横向)
scroll:卷起来的距离,如果没有出现scrollbar,那么这个值始终为0。
所以说,如果不想要计算元素的边框所占用的宽度,上面的这个例子应该使用clientWidth,而不是offsetWidth。
分享到:
相关推荐
05-offset,scroll,client.html
在本篇文章里小编给大家整理了关于js 元素offset,client , scroll 三大系列总结,有需要的朋友们可以学习下。
HTML元素有几个offset、client、scroll开头的属性,总是让人摸不着头脑。在书中看到记下来,分享给需要的小伙伴。主要是以下几个属性: 第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent 第...
在学习前端的过程中,我们经常会碰到offset, client与scroll,所以我就把它们称作为‘三剑客’。 01 offset – 偏移量 定义:元素在屏幕上占用的所有的可见的空间。 元素可见的大小由其高度、宽度决定,包括所有内...
offsetTop 指元素距离上方或上层控件的位置,整型,单位像素。 offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素。 offsetWidth 指元素控件自身的宽度,整型,单位像素。 offsetHeight 指元素控件自身的...
主要介绍了JS前端知识点offset,scroll,client,冒泡,事件对象的应用,结合实例形式总结分析了offset,scroll,client,冒泡,事件对象相关功能、原理及操作注意事项,需要的朋友可以参考下
本课将带你学习前端开发中最重要的技术JavaScript,它是网页与用户进行交互的基石。我们将从最简单的点击事件、表单提交、元素改变颜色开始,一步步由浅及深学习JS的各种酷炫知识。最后我们还会学习Jquery框架,以...
我们知道,三大家族包括:offset/scroll/client。今天来讲一下offset,以及与其相关的匀速动画。 offset的中文是:偏移,补偿,位移。 js中有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括: ...
JS的实用教程,传智播客...包括:轮播图、匀速动画、缓动动画、浏览器可视区域操作、固定导航栏、楼层切换、鼠标跟随、放大镜效果、拖拽对话框、事件冒泡、正则表达式等等,并介绍了三大家族:scroll、client、offset
Math.max(c['scroll' + b], c['offset' + b], h['client' + b], h['scroll' + b], h['offset' + b]) : (t = this.offset()) && t[k] : this.each(function () { a(this).css(k, n) }) } }); [ 'width', '...
1、之前我们学习的JS盒子模型中:client系列/offset系列/scrollWidth/scrollHeight都是“只读”的属性-> 只能通过属性获取值,不能通过属性修改元素的样式 2、scrollTop/scrollLeft:滚动条卷去的高度/宽度(这两个...
你还在为offset,scroll,inner,client,screen,mouse发愁吗? 头都大了。而且各个浏览器方法还不太一样。所以往往很浪费我们的时间。 于是我产生了写一个方法用户 专门获取这样的数据。
关于元素的一些属性 在前端的日常开发中,我们经常无可避免的需要获取或者监听一些页面的属性,那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性。特别是一下这些: 尺寸相关:offsetHeight、...
SHERlocked93 个人博客作品博客年终总结JavaScript20212019201920192018JS 活学活用正则表达式 2018JS 中的 offset、scroll、client 总结 2018JS 静态类型检查工具 Flow 2018JS throttle 与 debounce 的区别 2018...
一直以来,都对JS获取元素的位置感到非常的困惑:一会client、一会offset、一会scroll。再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的。
本人学习前端时的总结笔记,包含数据类型、循环结构、分支结构、函数预解析、常用内置对象方法、浏览器兼容问题、offset系列、scroll系列、client系列。 是什么原型、原型的作用、原型链 继承: 1、什么是借用构造...
Optimized Smart Client Security Requirements - Use Dundas Chart and Smart Client controls in an Intranet environment without any needed changed to permissions, and with slight modifications in an ...