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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 如何使用python读取txt文件中的数据

    如何使用python读取txt文件中的数据参考:如何使用python读取文本文件中的数字?python读取txt各个数字python读取文本文件内容转化为python的listpython:如何将txt文件中的数值数据读入到list中,且在list中存在的格式为float类型或者其他数值类型python.txt文件读取及数据处理总结利用Python读取txt文档的方法Python之读取TXT文件的三种方法python…

    2022年5月30日
    32
  • jar包反编译工具

    jar包反编译工具在学习和开发JAVA项目中,我们经常会用到第三方提供的一些jar。使用这些第三方工具包,可以提高我们开发的效率,缩短开发的时间。有的第三方工具,提供具体的使用说明和源代码,有时有的却不提供源代码,使用说明也不是很具体,这对我们使用就非常不方便。  有道是,知其然才知其所以然。有时候,我们…

    2022年7月8日
    27
  • pycharm打不出中文_pycharm语言怎么改成中文

    pycharm打不出中文_pycharm语言怎么改成中文pycharm不能输入中文解决办法

    2025年8月15日
    1
  • SOP 1.1.0 发布,开放平台解决方案项目「建议收藏」

    SOP 1.1.0 发布,开放平台解决方案项目「建议收藏」SOP 1.1.0 发布,开放平台解决方案项目

    2022年4月21日
    46
  • Java JSON格式字符串转JSON数组与JSON

    Java JSON格式字符串转JSON数组与JSON<!–json-lib–><dependency><groupId>net.sf.json-lib</groupId><artifactId>json-lib</artifactId><version>2.4</version>&amp

    2022年9月8日
    1
  • 6.25科技新闻4

    6.25科技新闻4Lytro光场相机体验评测Lytro光场相机是一款可以先拍照,后对焦的相机。当时一出现就引起挺大的反响的,现在就随小编一起来体验一下这款光场相机吧! 关于光场相机的外观,小编不再累述了。各位可以到之前的《先拍后对焦LYTRO光场相机图赏》里面观看完整外观图。 首先我们来看看官方介绍:小编大概把图中的意思翻译了一下,翻译都在图上,看

    2022年6月5日
    131

发表回复

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

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