详解 javascript中offsetleft属性的用法


Posted in Javascript onNovember 11, 2015

此属性可以返回当前元素距离某个父辈元素左边缘的距离,当然这个父辈元素也是有讲究的。

(1).如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离。
(2).如果父辈元素中没有定位元素,那么就返回相对于body左边缘距离。

语法结构:

obj.offsetleft

特别说明:此属性是只读的,不能够赋值。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
 margin: 0px;
 padding: 0px;
}
#main{
 width:300px;
 height:300px;
 background:red;
 position:absolute;
 left:100px;
 top:100px;
}
#box{
 width:200px;
 height:200px;
 background:blue;
 margin:50px; 
 overflow:hidden;
}
#inner{
 width:50px;
 height:50px;
 background:green;
 text-align:center;
 line-height:50px;
 margin:50px;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var inner=document.getElementById("inner");
 inner.innerHTML=inner.offsetLeft;
}
</script>
</head>
<body>
<div id="main">
 <div id="box">
 <div id="inner"></div>
 </div>
</div>
</body>
</html>

上面的代码可以返回inner元素距离main元素的左侧的距离,因为main元素是第一个定位父辈元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
 margin: 0px;
 padding: 0px;
}
#main{
 width:300px;
 height:300px;
 background:red;
 margin:100px;
}
#box{
 width:200px;
 height:200px;
 background:blue;
 overflow:hidden;
}
#inner{
 width:50px;
 height:50px;
 background:green;
 text-align:center;
 line-height:50px;
 margin:50px;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var inner=document.getElementById("inner");
 inner.innerHTML=inner.offsetLeft;
}
</script>
</head>
<body>
<div id="main">
 <div id="box">
 <div id="inner"></div>
 </div>
</div>
</body>
</html>

上面的代码返回inner元素距离body元素左侧的尺寸。

此属性具有一定的兼容性问题,具体可以参阅offsetleft兼容性简单介绍一章节。

ps:js中的offsetLeft属性具体有什么作用?

可以判断一个物体的跟document的左边距离,也就是浏览器左边缘。比如你写一个div 获取这个div之后alert(你的div.offsetLeft)就可以看到他现在距离浏览器左边的距离。当然你也可以用他给对象赋值,offset不单单只有Left 还有offsetTop offsetWidth offsetHeight 都是JS里很有用的属性。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
vue路由跳转传参数的方法
May 06 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
jquery事件的ready()方法使用详解
Nov 11 #Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 #Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 #Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 #Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 #Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 #Javascript
js密码强度校验
Nov 10 #Javascript
You might like
php查询ip所在地的方法
2014/12/05 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
python字符串连接方式汇总
2014/08/21 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
Python3 读取Word文件方式
2020/02/13 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
管理部部长岗位职责
2013/12/05 职场文书
毕业自我评价
2014/02/05 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
停电通知范文
2015/04/16 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL