详解 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 学习笔记(十二) dom
Jan 21 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
Vue实现剪贴板复制功能
Dec 31 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 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
React Native之TextInput组件解析示例
2017/08/22 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
详解Python函数式编程—高阶函数
2019/03/29 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
全球最大的游戏市场:G2A
2018/07/05 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
MySQL创建表操作命令分享
2022/03/25 MySQL