详解 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 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
复制js对象方法(详解)
Jul 08 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
JS中箭头函数与this的写法和理解
Jan 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
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
PHP 已经成熟
2006/12/04 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
Python提取频域特征知识点浅析
2019/03/04 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
高级人员简历的自我评价分享
2013/11/03 职场文书
美工的岗位职责
2013/11/14 职场文书
合同意向书范本
2014/07/30 职场文书
医生见习报告范文
2014/11/03 职场文书
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python