详解 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类继承机制的原理分析
Sep 12 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
输入框跟随文字内容适配宽实现示例
Aug 14 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
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
对于Python的框架中一些会话程序的管理
2015/04/20 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
个人自荐信
2013/12/05 职场文书
会议接待欢迎词
2014/01/12 职场文书
市场开发计划书
2014/05/07 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
学生干部培训方案
2014/06/12 职场文书
保密工作整改报告
2014/11/06 职场文书
工作会议通知
2015/04/15 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android