html中offsetleft属性,offsetleft兼容性的理解

html中offsetleft属性,offsetleft兼容性的理解关于此属性的基本用法可以参阅 offsetleft 属性用法详解一章节 此属性具有一定的兼容性问题 那就是在 IE7 浏览器中 它的返回值是想对于最近的父辈元素的左侧的距离 上面的代码在其他浏览器中返回值是 100 但是在 IE7 浏览器中返回值是 50 至于 IE6 没有测试 感兴趣的大家可以做一下测试 下面抽点空给大家介绍 offsetLeft 与 style left 的区别 offsetLeft 获取的是相对于父对象的

关于此属性的基本用法可以参阅offsetleft属性用法详解一章节。

此属性具有一定的兼容性问题,那就是在IE7浏览器中,它的返回值是想对于最近的父辈元素的左侧的距离。

ebacdd0d7943111bf94f81fd149d4f27.png

上面的代码在其他浏览器中返回值是100,但是在IE7浏览器中返回值是50。

至于IE6没有测试,感兴趣的大家可以做一下测试。

下面抽点空给大家介绍offsetLeft与style.left的区别

offsetLeft 获取的是相对于父对象的左边距

left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距

如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,

这同offsetLeft是相同的,区别在于:

1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,

还用offsetLeft比较方便。

2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。

3. style.left的值需要事先定义,否则取到的值为空。而且必须要定义在html里,我做过试验,如果定义在

css里,style.left的值仍然 为空,这就是我刚开始碰到的问题,总是取不到style.left的值。

offsetLeft则仍然能够取到,无需事先定义div的位置。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/233485.html原文链接:https://javaforall.net

(0)
上一篇 2025年7月15日 上午8:01
下一篇 2025年7月15日 上午8:22


相关推荐

  • ROS移动机器人基于RRT(快速探索随机树)算法 rrt_exploration实现真实机器人自主探索建图

    ROS移动机器人基于RRT(快速探索随机树)算法 rrt_exploration实现真实机器人自主探索建图仿真机器人加真实机器人功能包下载链接 https download csdn net download 博主为了图方便 就直接使用了古月老师的仿真包了 博主先和自己的朋友先在真实的机器人上实现了这个功能 再在仿真上来实现了一下 也可以先去 zhangrelay 老师的博客看看关于 rrt 的资料 这里继续更新这里先展示 rrt 建图的过程 下面

    2026年3月20日
    2
  • 南大lamda实验室失败面经分享「建议收藏」

    南大lamda实验室失败面经分享「建议收藏」2019年保研基本上尘埃落定,博主最后去了北大信科读研。关于北大的夏令营,把北大往年的夏令营真题刷一刷https://blog.csdn.net/caozixuan98724/article/details/93521208,面试就个凭造化了。值得说的内容不多,反而是最早开始的南大一行,值得说的地方很多,非常有趣,作为我参加的第一个保研面试,跪的一塌糊涂。初审首先先讲lamda实验室的初审…

    2022年4月29日
    99
  • ORM常用操作

    一般操作专业官网文档必会13条查询<1>all():查询所有结果<2>filter(**kwargs):它包含了与所给筛选条件相匹配的对象<3>

    2022年3月29日
    43
  • jQuery中delegate和on的用法与区别详细解析

    jQuery中delegate和on的用法与区别详细解析在 jQuery1 7 中 delegate 已被 on 取代 对于早期版本 它仍然使用事件委托的最有效手段 在事件绑定和委派 delegate 和 on 在一般情况下 这两种方法是等效的 delegate 指定的元素 属于被选元素的子元素 添加一个或多个事件处理程序 并规定当这些事件发生时运行的函数 复制代码代码如下 jQuery1 4 3 elements delegate selector events data handler jQuer

    2026年3月26日
    2
  • java分页计算当前页_java分页计算[通俗易懂]

    java分页计算当前页_java分页计算[通俗易懂]java仿google的分页算法1.现将数据从数据库读取出来封装一个java类中,在java类中计算publicclassPage{//成员变量//当前页privateintnowpage;//总记录数privateintcountrecord;//总页数privateintcountpage;//当前页记录开始的位置privateintpageindex;//每页显示的…

    2022年10月3日
    7
  • RANSAC算法详解

    RANSAC算法详解RANSAC 算法详解给定两个点 p1 与 p2 的坐标 确定这两点所构成的直线 要求对于输入的任意点 p3 都可以判断它是否在该直线上 初中解析几何知识告诉我们 判断一个点在直线上 只需其与直线上任意两点点斜率都相同即可 实际操作当中 往往会先根据已知的两点算出直线的表达式 点斜式 截距式等等 然后通过向量计算即可方便地判断 p3 是否在该直线上 生产实践中的数据往往会有一定的偏差 例如我们知道两个变

    2026年3月17日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号