IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

elem.style.left与elem.offsetLeft的区别

记事本 2010-08-06 00:15:38 累计浏览 1,795 次
本机暂存

elem.style.left是元素的最左边(包括元素的margin-left)到offsetParent左边padding(包括左边padding)的距离。

用公式简单的表示一下两者的关系:elem.offsetLeft = elem.style.left + elem.style.marginLeft

在IE8下:
elem.offsetLeft = elem.style.left + elem.style.marginLeft + elem.offsetParent.borderLeftWidth

在IE7下:
elem.offsetLeft = elem.style.left + elem.style.marginLeft + elem.offsetParent.borderLeftWidth + elem.offsetParent.marginLeftWidth

在IE6下:
elem.offsetLeft = elem.style.left + elem.style.marginLeft + elem.offsetParent.paddingLeftWidth + elem.offsetParent.borderLeftWidth + elem.offsetParent.marginLeftWidth

记录一下,如何取得元素的”计算出的样式”。

以下是代码片段:
function getCurrentStyle(elem, style) {
 return window.getComputedStyle
   ? window.getComputedStyle(elem, null)[style]
   : elem.currentStyle[style];
}

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,350)
  2. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  3. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,406)
  4. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,934)
  5. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,849)
  6. 天朝第二代身份证号码的验证机制 (累计阅读 14,764)
  7. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  8. 分享一个JQUERY颜色选择插件 (累计阅读 14,224)
  9. 什么是全栈工程师? (累计阅读 14,039)
  10. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)