先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个是定位过的,返回值就是body元素   ele.offsetLeft和ele.offsetTop取值问题,分多种情况: 如果ele是body的直接子元素,返回值则是ele距离body左侧或顶部的距离 如果ele不是body的直接子元素,在父元素进行定位(relative,absolute)的情况下,

scrollTop和offsetTop的区别:scrollTop是指某个可滚动区块向下滚动的距离,比如向下滚动了10个像素,那么这个元素的scrollTop属性值就是10,这个属性的值是可读写的,且不需要设置positionoffsetTop则是元素的上边框与父元素的上边框的绝对距离. scrollLeft:设置或获取对象最左端和对象内容的最左端之间的距离,这个属性的值是可读写的offsetLeft:获取对象相对于版面或由offsetParent属性指定的父坐标的左侧位置. 调用scrollLe

1.obj.style.left 取得是字符串:28px; 而 obj.offsetLeft取得的值为数字 28: 2.obj.style.left 需要事先将left值写在HTML中,不能致谢在CSS中,否则取不到值.而obj.offsetLeft 则都可以取到值. 个人觉得目前我用到的主要是这两个区别.

1. 首先一个标签元素的left属性是一个string类型,而offsetLeft是一个numberle类型. 求证: <script> window.onload = function(){ var oDiv = document.getElementById('div1'); alert(typeof oDiv.style.left); alert(typeof oDiv.offsetLeft); } <sctipt> 2. offsetLeft与left之间的转换运算: 用o

今天在制作焦点轮播图的时候,遇到一个问题,在使用style.left获取图片的位置时,怎么也获取不到.换用offsetLeft就能够成功获取到了.虽然实现了我想要的效果,但是还是不甘心啊,没有找到原因,心里就是怪怪的,于是我翻开JavaScript高级程序设计,将style.left和offsetLeft有关的知识点都看了一下,做了如下比较. (一).对于style.left类属性,JavaScript高级程序是这样描述的:任何支持style特性的HTML元素在JavaScript中都有一个对应

IE7以上(不是火狐): 父级没有定位: 本身没有定位: ==> offsetParent:body 本身定位为:absolute/relative: ==> offsetParent:body 父级有定位: 本身没有定位: ==> offsetParent:定位父级 本身定位为:absolute/relative: ==> offsetParent:定位父级 本身定位为: fixed ==> offsetParent: null 火狐 父级没有定位: 本身没有定位: ==&

offsetParent <!doctype html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> div{ padding:40px 50px;} #div1 { background:red;} #div2 { background:blue; position:relative;} #div3 { ba

DOM:Document Object Model 文档对象模型文档:html页面文档对象:页面中的元素文档对象模型:定义为了能够让程序(js)去操作页面中的元素DOM会把文档看作是一棵树document > html > html(标签),同时定义了很多方法来操作这棵树中的没一个元素:DOM节点:操作子节点和兄弟节点:childNodes(不推荐使用)是一个属性,属性是不需要加括号,用某个对象来调用,它是一个子节点列表集合.只包含一级子节点,不包含孙级节点 标准下元素节点包含文本节点,也包含

1元素属性   1.1childNodes 返回元素的一个子节点的数组 (不推荐,建议用非标准children代替) 提醒:只包含一级子节点,不包含后辈孙级别以下节点. children:返回元素的一个子节点的数组(同childNodes区别,只返回Element(元素) 类型节点,不返回 Text 节点) 1.2nodeType 返回节点类型 1.3attributes 返回节点属性 <!DOCTYPE html> <HTML LANG="en"> <H

知识点总结 childNodes.children子节点列表集合.nodeType节点类型.nodeName.nodeValue.attributes属性列表集合 childNodes和children都只包含子节点,不包含孙节点. 区别: childNodes-- 标准下:包含元素和文本节点,也会包含非法嵌套的子节点 非标准下:只包含元素节点,IE7以下不会包含非法嵌套的子节点(IE6) children-- 标准模式下和非标准模式下:只包含元素节点(推荐使用此方法) nodeType 为节点

一 scroll系列属性      ——滚动

元素的属性 div.attributes是所有标签属性构成的数据集合 div.classList是所有class名构成的数组集合 在classList的原型链上可以看到add()和remove() 1.client系列 clientWidth/clientHeight是我们设置的宽和高架上内边距(没有边框) clientLeft/clientTop就是我们设置的边框值 2.Offset系列 offsetWidth/offsetHeight是我们设置的宽和高加上内边距加上边框 offsetTop/

JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布   研究了一年多的js,也差不多写一个自己的js库了.我写这个不算框架,只是一个小型的js工具库,所以我用的名字是Library.主要集合了我写js时一些常用的方法,并参考了prototype.js,jquery,google,百度,有啊等框架. 这个工具库的主要特点是: [跨浏览器]能在以下浏览器使用:IE6,IE7,IE8,Firefox 3.5.3,Chrome 3.0,Safari

JS中的offset家族: 一.offsetWidth与offsetHeight: 获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽高 2.获取到的值是一个number类型,不带单位 3.获取的宽高包含border和padding 4.只能读取,不能设置 console.log ( div.offsetWidth );//width + border + padding console.log (div.offsetHeight

学习目标: 掌握API和Web API的概念 掌握常见浏览器提供的API的调用方式 能通过Web API开发常见的页面交互功能 能够利用搜索引擎解决问题 typora-copy-images-to: media --- Web API Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节.

特效 偏移量 offsetParent用于获取定位的父级元素 offsetParent和parentNode的区别  var box = document.getElementById('box'); console.log(box.offsetParent); console.log(box.offsetLeft); console.log(box.offsetTop); console.log(box.offsetWidth); console.log(box.offsetHeight);

元素节点的树状图 document>documentElement>body>tagName offsetLeft/offsetTop 结合运动 滚动轮播 1.DOM 全称:document object model (1) 节点树状图 document>documentElement>body>tagname 2.我们常用的节点类型 元素节点(标签) 文本节点(文本节点) 属性节点(标签里的属性) 3.document有个属性叫nodeType 返回的是数字 1代表元

内置对象 内置对象就是JS提供的一套工具箱,我们通过内置可以很方便的进行一些操作. Math对象: Math.ceil() //向上取整,天花板 Math.floor() //向下取整,地板 Math.round() //四舍五入 Math.random() :返回0-1之间的一个随机数,[0,1) 能取到0,取不到1 Math.abs() :取绝对值 Math.pow(num, power) :求num的power次幂 Math.sqrt(num) :对num开平方 Date对象: "2016

DOM:Document Object Model文档对象模型,用于让程序(js)取操作页面中的元素.DOM节点类型有12种. (一)属性 一.子节点操作1.所有子节点(1)元素.childNodes ==>只读,元素子节点列表集合(只包含一级子节点,不包含后辈孙级以下节点)标准浏览器:包含了文本和元素类型节点,也会包含非法嵌套的子节点.非标准浏览器:只包含元素类型节点,IE7以下不包含非法嵌套的子节点.兼容处理:由于文本节点无背景等样式,故在设置样式前用.nodeType判断节点类型.元素.n

当在 Web 浏览器中查看 HTML 文档时,DOM 节点被解析,并被渲染成盒模型(如下图),有时我们需要知道一些信息,比如盒模型的大小,盒模型在浏览器中的位置等等,本文我们就来详细了解下元素节点的几何量以及滚动几何量. 获取元素相对于 offsetParent 的 offsetTop 以及 offsetLeft 值 使用 offsetTop 和 offsetLeft 属性,我们可以获取元素节点相对于 offsetParent 的偏移像素量.这些元素节点属性告诉我们某元素上部与左侧边框最外沿到

offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidth 5.offsetHeight 先看代码示例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio