元素的offsetParent属性 : 只读 属性 离当前元素最近的一个有定位属性的父节点 (一):如果当前元素的DOM父节点没有定位的情况: 如果没有定位父级,默认是body ie7以下,如果当前元素没有定位默认是body, 如果有定位则是html ie7以下,如果当前元素的某个父级触发了layout, 那么offsetParent就会被指向到这个触发了layout特性的父节点上 (二):如果当前元素的DOM父节点有定位的情况: 当前元素无论是否有定位的情况,其offsetParent就是离其最近的有定位的父节点元素 元素的offsetLeft/Top : 只读 属性 当前元素到定位父级的距离(偏移值), 到当前元素的offsetParent的距离。 1:如果当前元素没有定位父级 offsetParent -> body offsetLeft -> html 2:元素父级有定位的情况 2-1:ie7以下: 2-1-1:如果元素自己没有定位,那么offsetLeft/Top是到body的距离 2-1-2:如果元素自己有定位,那么就是到定位父级的距离 2-2:其他浏览器:到定位父级的距离 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>size</title> <link rel="stylesheet" href=""> <style type="text/css"> * { margin: 0px; padding: 0px; } #parent { width: 200px; height: 200px; margin: 0 auto; margin: 50px; border: 1px solid green; position: relative; padding: 20px; } #son { width: 100px; height: 100px; border: 1px solid yellow; margin: 50px; padding: 10px; /* position: absolute; left: 0px; top: 5px; */ } /* 1:父类没有指定定位的时候,offsetTop就是子类的外边距(margin)+边框(border)+父类的到子类的外边距(父类的margin)101px offsetLeft和offsetTop在IE8中出现了不一致的情况,区别有二: 1、>IE8的offsetLeft和offsetTop返回的是相对于offsetParent的值,而IE8之前返回的是相对于BODY的值; 2、I>E8的offsetLeft和offsetTop返回的值是包括offsetParent的borderLeftWidth和borderTopWidth的,IE8以前是不包括的; 2:父类指定的定位方式,那就是直接子类的top/left+子类的边距 父类设置啦margin+padding 在ie8/chrome等高级浏览器:子类的top是top/left+父类的mg+父类的pad ie8以下:子类对父类的margin(外边距) */ </style> </head> <body> <div id="parent"> <div id="son"> son </div> </div> <script type="text/javascript"> window.onload = function() { var p = document.getElementById("parent"); var s = document.getElementById("son"); alert(s.offsetTop + "px"+"----"+getOffsetTop(s)); function getOffsetLeft(o) { var left = 0; while (o != null && o != document.body) { left += o.offsetLeft; o = o.offsetParent; } return left; } /* *兼容ie6以上和ff的offsetTop */ function getOffsetTop(o) { var top = 0; while (o != null && o != document.body) { top += o.offsetTop; o = o.offsetParent; } return top; } } </script> </body> </html>
相关推荐
对flumelog-offset中的不同层进行基准测试,以查看性能问题在哪里。 方法 我拿了一个大文件(在这种情况下,是我的安全scuttlebutt本地日志,大小:343 Mb),并使用各种方法(不同的块大小)对其进行扫描。 (并...
关于LaravelLaravel是一个具有表达力,优雅... Laracasts包含1500多个视频教程,涉及各种主题,包括Laravel,现代PHP,单元测试和JavaScript。 深入我们全面的视频库,提高您的技能。 Laravel赞助商我们要感谢以下赞
我们先来看看这个bug 是怎么产生的。 代码如下: <style type=”text/css”> #div1 { width: 200px; height: 200px; background: red; } </style> 代码如下: ...以下是用来测试
我认为JavaScript中的FFT可以正常工作。 没有承诺,但是我曾经对Wolfram Alpha进行过测试,并且它相当准确。 有针对主要因子2、3、4的优化内核,因此,如果要获得高性能,请使用长度是这些因子的一个。 请注意,DFT...
可用于实现基于块的存储后端的测试套件和接口 安装 npm install abstract-chunk-store 一些使用这个的模块 ls-chunk-store 延迟大块存储 indexeddb-chunk-store idb-chunk商店 idbkv-chunk-store 高速缓存存储块...
帆布选框 ... 'Angular' , '测试跑马灯效果' ] ; var opts = { id : 'canvas' , data : textList , top : 20 , offset : 1 , gap : 10 , font : '20px Arial' , color : '#339966' } ; var marq
测试任务,呵呵简要地获取/:ID 邮政 / 放/:id 获取--每张图片和作者可用的最“有趣”的两个联接查询参数:sort,orderBy,limit,offset,author(隐含author.id) 验证:由于我没有使用准备好的语句,所以我认为...
在java中一个hashCode算法,可以用来计算一个字符串的hash值,今天一个朋友突然问俺能不能在js中计算hashCode,要求和java的hashCode计算结果一样。 对于java的hashCode,以前到现在也一直没有了解过其算法,不过...
BeatDetect.js是一个JavaScript ES6组件,用于计算曲目的BPM,包括其时间偏移和到其第一个真实拍子的时间偏移。 有几种方法可以微调流程,但是BeatDetect.js可以根据4/4 BeatDetect.js与现代音乐(在EDM音乐上效果...
这个编辑器是一个 Joomla 插件,兼容 Joomla 3.0 以上。 如果您想测试它,请从此处下载最新版本: 如果您不在前端使用 Bootstrap 3 模板,请确保在安装后启用内容插件。 这包括前端的 bootstrap css 和 js。 ##编辑...
npm run generate-data生成要测试的测试数据。 数据在./data文件夹中创建。 或者,您可以使用以下方法复制现有的SSB数据: mkdir -p ./data/db2/ node ./node_modules/jitdb/copy-json-to-bipf-async.js ~ /.ssb/...
最佳组合 我用布尔玛制作的更新后的响应式投资组合网站 安装 将存储库克隆到本地设备 文件夹已经结构化,因此请在浏览器中打开index.html文件进行测试...JavaScript areaObject哈希属性 jQuery offset() jQuery scro
vec3 具有强大的单元测试的3D矢量数学。用法var v = require ( 'vec3' ) ;var v1 = v ( 1 , 2 , 3 ) ;console . log ( v1 ) ; // prints "(1, 2, 3)"var v2 = v1 . offset ( 0 , 0 , 1 ) ;console . log ( v2 ) ; //...
脱字词 获取插入符号中的单词。 安装 使用安装: ... 特此授予任何人免费获得本软件副本和相关文档文件(“软件”)的许可,不受限制地处理本软件,包括但不限于使用、复制、修改、合并的权利、发布、分发
Mr Porter Web 开发测试 任务 使用 API 构建动态产品列表页面 确保其布局适应移动/桌面视口 确保产品图像在视网膜设备上看起来清晰 实现分页/无限滚动 使用您认为适用的任何库/框架 不要担心页眉/页脚 使用以下。 ...
这个小插件可让您通过一个创始人创建的JS调用,自动修复网站上任何容器的位置。 演示版 兼容性 桌面上的现代浏览器(例如Chrome,Firefox和Safari)已经过测试。 基本用法 使用此插件,您可以通过一个JS调用在视口中...
##js-wallclock## 移动动作事件实验 ###演示### 这只能在移动设备上查看 ###用法### 在正文底部包含 CSS 和 JS 脚本 实例化 wallClock 类 [removed] ...一加一 安卓 4.4 Chrome合金 好
es6-smoothscroll ES6 平滑滚动 npm i es6-smoothscroll ... offset : 0 , onScrollBefore : ( el ) => { } , onScrollAfter : ( el ) => { } } 贡献 npm test 注意力 目前没有测试 执照 :copyright:糖心
好吧,使用大多数原生过滤器(如上述limit和offset或测试equals或gte直接从请求的 url 中收取您的查询费用。 评论我听到你了,性能怎么样,或者安全怎么样? 如果任何人都可以通过输入带有一些参数的 url 来轻松...