【js中scrollLeft、scrollWidth、offsetTop等相关位置属性的理解（转）】的更多相关文章

js中scrollLeft、scrollWidth、offsetTop等相关位置属性的理解（转）

1.常见的事件位置属性 e.pageX——相对整个页面的坐标 注意:IE6.IE7.IE8无该属性 e.layerX——相对当前坐标系的border左上角开始的坐标 注意:在opera.IE6.IE7.IE8中这个属性,而IE8以上表示相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离 e.offsetX——相对当前坐标系的border左上角开始的坐标 注意:火狐中无该属性 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 注意:火狐中无该属性 2.page…

js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别

js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox等. 一.测试1:无滚动条时,dom对象的offsetWidth.clientWidth和scrollWidth (1)测试代码 <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset=&q…

JS中的prototype、__proto__与constructor属性

作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞懂它们.这里说明一点,__proto__属性的两边是各由两个下划线构成(这里为了方便大家看清,在两下划线之间加入了一个空格:_ _proto_ _).   现在正式开始!让我们从如下一个简单的例子展开讨论,并配以相关的图帮助理解: function Foo() {...};let f1 = new…

js中的各种宽高以及位置总结

在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之间 实现方式不同,常常会造成概念混淆,经过研究之后,这里来进行一个总结. 第一部分:DOM对象 1.1只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和client…

js中的如何定位固定层的位置

需要获取一些HTML的对象的坐标来更灵活的设置目标层的坐标,这里可以通过用到document.body.scrollTop等属性,但是这些属性在xhtml的标准网页中或更简单的说就是带<!DOCTYPE...>的标签中得到的值是0:如果不要此标签则一切正常,那么在xhtml中如何获取body的坐标呢?当然有办法了,我们使用document.documentElement来取代document.body例如可以这样写: 复制代码代码如下: var top=document.documentEle…

jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题

今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/details/50703704,在这个博文里面提到了this.scrollParent.scrollTop(),那么对这个位置进行断点调试.(当然最开始也尝试了一下注释了这个地方,并没什么用) 在这个处理过程中,我发现我得拖拽对象的scrollParent并不是想象中的直接上级,而是不知上了多少级的父…

详解JS中DOM 元素的 attribute 和 property 属性

一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 html 标签拥有的属性: property 是 dom 元素在 js 中作为对象拥有的属性. 从定义上可以看出: 对于 html 的标准属性来说,attribute 和 property 是同步的,是会自动更新的 但是对于自定义的属性来说,他们是不同步的.(自定义属性不会自动添加到property)…

JS中的实例方法、静态方法、实例属性、静态属性

一.静态方法与实例方法的例子: 我们先来看一个例子来看一下JS中的静态方法和实例方法到底是什么? 静态方法: function A(){} A.col='red'  //静态属性 A.sayMeS=function(){ console.log("Hello World S!"); } A.sayMeS();//输出Hello World S! 实例方法: function A(){ this.Color="yellow"  //实例属性 } A.prototype…

Js中关于构造函数，原型，原型链深入理解

在 ES6之前,在Javascript不存在类(Class)的概念,javascript中不是基于类的,而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏 览器也支持 ES6,不过只实现了 ES6 的部分特性和功能. 1.那么何为构造函数呢? 其实构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用.我 们可以把对象中一些公共的属性和方…

JS中对象的定义及相关操作

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="jquery-1.7.1.js&…