javascript中top、clientTop、scrollTop、offsetTop 的讲解
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由offsetParent 属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由offsetTop 属性指定的父坐标的计算顶端位置event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
onMouseover当鼠标经过的时候，触发= 后面的脚本函数
onMouseout 当鼠标离开。。
onMouseUP 当鼠标按下又抬起。。。
onmousemove 当鼠标移动。。
onmousedown 当鼠标按下时。。
假设obj 为某个HTML 控件。
obj.offsetTop 指obj 相对于版面或由offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。
obj.offsetLeft 指obj 相对于版面或由offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。
obj.offsetWidth 指obj 控件自身的绝对宽度，不包括因overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素。
obj.offsetHeight 指obj 控件自身的绝对高度，不包括因overflow 而未显示的部分，也就是其实际占据的高度，整型，单位像素。
我们对前面提到的offsetParent 作个说明。
offsetParent 获取定义对象offsetTop 和offsetLeft 属性的容器对象的引用。offsetTop 与offsetParent 很复杂，不同浏览器有不同解释，浮动一下解释又不同了，所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。
以上属性在FireFox 中也有效。
另外：我们这里所说的是指HTML 控件的属性值，并不是document.body，document.body 的值在不同浏览器中有不同解释（实际上大多数环境是由于对document.body 解释不同造成的，并不是由于对offset 解释不同造成的）
我们知道offsetTop 可以获得HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：
一、offsetTop 返回的是数字，而style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而style.top 可读写。
三、如果没有给HTML 元素指定过top 样式，则style.top 返回的是空字符串。offsetLeft 与style.left、offsetWidth 与style.width、offsetHeight 与style.height 也是同样道理。
clientHeight
大家对clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
offsetHeight
IE、Opera 认为offsetHeight = clientHeight + 滚动条+ 边框。
NS、FF 认为offsetHeight 是网页内容实际高度，可以小于clientHeight。scrollHeight
IE、Opera 认为scrollHeight 是网页内容实际高度，可以小于clientHeight。
NS、FF 认为scrollHeight 是网页内容高度，不过最小值是clientHeight。
简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为offsetHeight 和scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于clientHeight 时，scrollHeight 的值是clientHeight，而offsetHeight 可以小于clientHeight。
IE、Opera 认为offsetHeight 是可视区域clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理
clientWidth、offsetWidth 和scrollWidth 的解释与上面相同，只是把高度换成宽度即可。
说明
以上基于DTD HTML 4.01 Transitional，如果是DTD XHTML 1.0 Transitional 则意义又会不同，在XHTML 中这三个值都是同一个值，都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的DOCTYPE 来启用不同的解释器
scrollTop 是“卷”起来的高度值，示例：
style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">如果为p 设置了scrollTop，这些内容可能不会完全显示。
由于为外层元素p 设置了scrollTop，所以内层元素会向上卷，这卷起来的部分就是scrollTop。
scrollLeft 也是类似道理。
我们已经知道offsetHeight 是自身元素的宽度，而scrollHeight 是内部元素的绝对宽度，包含内部元素的隐藏的部分。上述中p 的scrollHeight 为300，而p 的offsetHeight 为100。
scrollWidth 也是类似道理。
IE 和FireFox 全面支持，而Netscape 8 和Opera 7.6 不支持scrollTop、scrollLeft （document.body.scrollTop、document.body.scrollLeft 除外）。
1.clientHeight, clientWidth:
这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入
元素中的页边距,边框等.
2.clientLeft,clientTop:
这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0.
3.scrollLeft,scrollTop:
如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不可以滚动的元素,这些值总是0.
4.scrollHeight,scrollWidth:
不管有多少对象在页面上可见,他们得到的是整体.
5.style.left:
定位元素与包含它的矩形左边界的偏移量
6.style.pixelLeft:
返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px. 利用这个属性可以单独处理以像素为单位的数值.
7.style:posLetf:
返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em
top,pixelTop,posTOp这几个类比就行了.
LEFT: 为从左向右移的位置,即挂件距离屏幕左边缘的距离;
clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离offsetLeft 返回对象相对于父级对象的布局或坐标的left值，就是以父级对象左上角为坐标原点，向右和向下为X、Y轴正方向的x坐标
pixelLeft 设置或返回对象相对于窗口左边的位置
scrollWidth 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。
clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width clientwidth：是元素的可见宽度。等于padding+width
scrollwidth:是元素的宽度且包括滚动部分。
offsetLeft:Html元素相对于自己的offsetParent元素的位置
scrollLeft:返回和设置当前横向滚动务的坐标值
onclick="alert('offsetLeft:'+this.offsetLeft)">
onclick="alert('offsetLeft:'+this.offsetLeft)">
保存为网页，运行一下，点按钮，滚动条移动
点击div，先弹出b相对于a的位置，再弹出a相对于窗口的位置
offsetTop、offsetLeft、offsetWidth、offsetHeight
等于在涌现了纵向转动条的情形下，转动条拉动的间隔．
NS、FF 以为offsetHeight 是网页内容现实高度，可以小于clientHeight。
FF 在分歧的DOCTYPE 中对clientHeight 的说明分歧，xhtml 1 trasitional 中则不是如上说明的。别的阅读器则不存在此题目。
当前工具的宽度.
留意.假如工具是包含在一个DIV中时,此DIV不会被当作是此工具的上级层,(即工具的上级层会跳过DIV工具)上级层是Table时则不会有题目.
3、假如没有给HTML 元素指定过top 样式，则style.top 返回的是空字符串。
IE 和FireFox 周全支撑，而Netscape 和Opera 不支撑scrollTop、scrollLeft （document.body 除外）。
6.scrollLeft :
5.offsetParent :
网页正文全文高：document.body.scrollHeight;
NS、FF 以为offsetHeight 是网页内容现实高度，可以小于clientHeight。offsetHeight
然则
别的：我们这里所说的是指HTML 控件的属性值，其实不是document.body，document.body 的值在分歧阅读器中有分歧说明（现实上年夜多半情况是因为对document.body 说明分歧酿成的，其实不是因为对offset 说明分歧酿成的），点击这里检察分歧点。
“提交”按钮的offsetTop 指“提交”按钮距“tool”层上边框的间隔，由于距其上边比来的是“tool”层的上边框。
var top = 0;
这四种阅读器分离为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。scrollHeight
网页被卷往的高：document.body.scrollTop;
当前工具的上级层工具.
我们已知道offsetHeight 是本身元素的宽度。
我们这里说说四种阅读器对document.body 的clientHeight、offsetHeight 和scrollHeight 的说明，这里说的是document.body，假如是HTML 控件，则又有分歧，点击这里检察。
2、clientHeight
以上属性在FireFox 中也有用。
2、offsetTop 只读，而style.top 可读写。
top = obj.offsetTop;
复制代码代码以下:
网页可见地区宽：document.body.clientWidth;
获得尽对地位剧本代码
clientHeight
同理
obj.offsetWidth 指obj 控件本身的宽度，整型，单元像素。
同理
当前工具到其上级层左侧的间隔.
与style.height属性的差别在于:如工具的宽度设定值为百分比高度,则不管页面变年夜照样变小,style.height都返回此百分比,而offsetHeight则返回在分歧页面中工具的高度值而不是百分比值
obj.offsetHeight 指obj 控件本身的高度，整型，单元像素。
while(obj != document.body)
网页正文部份左：window.screenLeft;
2.offsetLeft :
我们知道offsetTop 可以取得HTML 元素间隔上方或外层元素的地位，style.top 也是可以的，两者的差别是：
这四种阅读器分离为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
7.scrollTop
网页可见地区高：document.body.offsetHeight (包含边线的宽);
年夜家对clientHeight 都没有甚么贰言，都以为是内容可视地区的高度，也就是说页面阅读器中可以看到内容的┞封个地区的高度，一样平常是末了一个对象条以下到状况栏以上的┞封个地区，与页面内容无关。
clientHeight
简朴地说
“提交”按钮的offsetLeft 指“提交”按钮距“tool”层左侧框的间隔，由于距其左侧比来的是“tool”层的左侧框。
简朴地说
屏幕分辩率的高：window.screen.height;
题目：scrollTop、scrollLeft、scrollWidth、scrollHeight
obj.offsetLeft 指obj 间隔左方或上层控件的地位，整型，单元像素。
IE、Opera 以为scrollHeight 是网页内容现实高度，可以小于clientHeight。
1.offsetTop :
上述中p 的scrollHeight 为300，而p 的offsetHeight 为100。
应用这个属性，可以获得当前工具在分歧年夜小的页面中的尽对地位．
}
准备常识：offsetTop、offsetLeft、offsetWidth、offsetHeight
IE、Opera 以为offsetHeight = clientHeight + 转动条+ 边框。
以上基于DTD HTML 4.01 Transitional，假如是DTD XHTML 1.0 Transitional 则意义又会分歧，在XHTML 中这三个值都是统一个值，都表现内容的现实高度。新版本的阅读器年夜多支撑依据页面指定的DOCTYPE 来启用分歧的说明器。下载或阅读测试文件。假如为p 设置了scrollTop，这些内容大概不会完整表现。
题目：offsetTop 与style.top 的差别
假定obj 为某个HTML 控件。
var left = 0;
比方：
}
3、scrollLeft
clientHeight 就是透过阅读器看内容的┞封个地区高度。
网页可见地区高：document.body.clientHeight;
IE、Opera 以为offsetHeight 是可视地区clientHeight 转动条加边框。scrollHeight 则是网页内容现实高度。
屏幕可用事情区宽度：window.screen.availWidth;
题目：clientHeight、offsetHeight和scrollHeight
4.offsetHeight :
clientWidth、offsetWidth 和scrollWidth 的说明与上面雷同，只是把高度换成宽度便可。
alert("Left Is : " + left + "\r\n" + "Top Is : " + top);
obj = obj.offsetParent;
网页可见地区宽：document.body.offsetWidth (包含边线的宽);
IE、Opera 以为scrollHeight 是网页内容现实高度，可以小于clientHeight。
IE、Opera 以为offsetHeight = clientHeight + 转动条+ 边框。
1、offsetTop 返回的是数字，而style.top 返回的是字符串，除数字外还带有单元：px。网页正文全文宽：document.body.scrollWidth;
p.scrollTop = 10;
4、clientLeft
我们对前面提到的“上方或上层”与“左方或上层”控件作个解释。
JavaScript面向对象简介 JavaScript 的核心是支持面向对象的，同时它也提供了强大灵活的OOP 语言能力。本文从对面向对象编程的介绍开始，带您探索JavaScript 的对象模型，最后描述 JavaScript 当中面向对象编程的一些概念。 复习JavaScript 如果您对JavaScript 的概念（如变量、类型、方法和作用域等）缺乏自信，您可以在重新介绍JavaScript这篇文章里学习这些概念。您也可以查阅这篇JavaScript 1.5 核心指南。 面向对象编程 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。它使用先前建立的范例，包括模块化，多态和封装几种技术。今天，许多流行的编程语言（如Java，JavaScript，C＃，C+ +，Python，PHP，Ruby 和Objective-C）都支持面向对象编程（OOP）。 面向对象编程可以看作是使用一系列对象相互协作的软件设计，相对于传统观念，一个程序只是一些函数的集合，或简单的计算机指令列表。在OOP中，每个对象能够接收邮件，处理数据和发送消息给其他对象。每个对象都可以被看作是一个独立的小机器有不同的作用和责任。 面向对象程序设计的目的是促进更好的编程灵活性和可维护性，并在大型软件工程中广为流行。凭借其十分注重的模块化，面向对象的代码开发更简单，往后维护更容易理解，使其自身能更直接的分析，编码，理解复杂的情况和过程，比非模块化编程方法省事。1
术语 Namespace 命名空间 允许开发人员在一个专用的名称下捆绑所有功能代码的容器。 Class 类 定义对象的特征。 Object 对象 类的一个实例。 Property 属性 对象的特征，比如颜色。 Method 方法 对象的能力，比如行走。 Constructor 构造函数 实例化时调用的函数。 Inheritance 继承 一个类可以继承另一个类的特征。 Encapsulation 封装 类定义了对象的特征，方法只定义了方法如何执行。 Abstraction 抽象 结合复杂的继承，方法，属性，一个对象能够模拟现实的模型。 Polymorphism 多态 多意为‘许多’，态意为‘形态’。不同类可以定义相同的方法或属性。更多关于面向对象编程的描述，请参照维基百科的面向对象编程。 原型编程
复习题1 一、选择题 1、写“Hello World”的正确javascript语法是 A. ("Hello World") B. "Hello World" C. ("Hello World") D. ("Hello World") 2、JS特性不包括( ) A.解释性 B.用于客户端 C.基于对象 D.面向对象 3、下列JS的判断语句中( )是正确的 (i==0)(i=0) i==0 then i=0 then 4、下列JavaScript的循环语句中( )是正确的 (i<10;i++) (i=0;i<10) i=1 to 10 (i=0;i<=10;i++) 5、下列的哪一个表达式将返回假 A.!(3<=1) B.(4>=4)&&(5<=2) C.(“a”==”a”)&&(“c”!=”d”) D.(2<3)||(3<2) 6、下列选项中,( )不是网页中的事件 7、有语句“var x=0;while(____) x+=2;”，要使while循环体执行10次，空白处的循环判定式应写为： A．x<10 B. x<=10 <20 <=20 8、JS语句 var a1=10; var a2=20; alert(“a1+a2=”+a1+a2) 将显示( )结果 +a2=30 +a2=1020+a2=a1+a2 9、将字串s中的所有字母变为小写字母的方法是( ) 、以下( )表达式产生一个0~7之间(含0,7)的随机整数. . floor()*8) 11、产生当前日期的方法是( ) (); () Date() Now() 12、如果想在网页显示后,动态地改变网页的标题( ) A.是不可能的 B.通过(“新的标题内容”) C. 通过=(“新的标题内容”) D. 通过(“新的标题内容”) 13、某网页中有一个窗体对象,其名称是mainForm,该窗体对象的第一个元素是按钮,其名称是myButton,表述该按钮对象的方法是()
实验项目三内置函数和对象 【学时数】 2 （45 分钟× 2=90 分钟） 【实验内容】 1 、JavaScript 内置函数的应用 2 、JavaScript 内置对象的应用 【实验参考】 《网页设计与制作》………………………………………………………… 重庆大学出版社 《网页标题制作技巧与实例》……………………………………………… 清华大学出版社 《javascript 入门与提高》……………………………………………… 清华大学出版社 《javascript 宝典》……………………………………………………… 电子工业出版社 【实验设备】 计算机，投影机 【实验目的与要求】 1 、掌握JavaScript 内置函数的使用方法 2 、掌握JavaScript 常用内置对象的属性和方法 【实验重点】 1 、掌握JavaScript 内置函数的使用方法 2 、掌握JavaScript 常用内置对象的属性和方法 【实验难点】 1 、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。 【实验方式】 1 、项目工程互动式教学法 2 、“讲、学、练”相结合：对于javascript 内置函数和对象相关细节，大量采用演示、讲解和操作等方式。使学生在实验中加深对相关内容的理解并熟练掌握。 【实验设计】 向学生演示多个javascrip 内置函数和对象的程序案例，学生跟着教师一起完成javascript 程序的编写，同时完成教师布置的思考题，教师实施指导。 第一步：演示JavaScript 内置函数的应用，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。（20 分钟左右）第二步：演示JavaScript 常用内置对象的应用，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。（35 分钟左右） 【实验过程】 实验内容一：JavaScript 内置函数的应用
基于对象的JavaScript语言 一、对象的基本结构 JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。属性是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；方法是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。 二、引用对象的途径 一个对象要真正地被使用，可采用以下几种方式获得： 1、引用JavaScript内部对象；this window 2、由浏览器环境中提供；https://www.doczj.com/doc/316584560.html, 3、创建新对象。new 这就是说一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，而出现错误信息。 三、有关对象操作语句 1、For...in语句 格式如下：For（对象属性名in 已知对象名） 说明：该功能是用于对已知对象的所有属性进行操作的循环控制。它是将一个已知对象的所有属性反复置给一个变量；而不是使用计数器来实现的。它的优点是无需知道对象中属性的个数即可进行操作。 2、with语句 使用该语句的意思是：在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。with object{ ...} 所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。 3、this关键字 this是对当前的引用，在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，最后自己已不知道现在引用的那一个对象，为此JavaScript提供了一个用于将对象指定当前对象的语句this。 4、New运算符可以创建一个新的对象 格式：
理解JavaScript中函数的使用 函数是进行模块化程序设计的基础，编写复杂的Ajax应用程序，必须对函数有更深入的了解。 JavaScript中的函数不同于其他的语言，每个函数都是作为一个对象被维护和运行的。通过函数对象的性质，可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前，先看一下函数的使用语法： function func1(…){…} var func2=function(…){…}; var func3=function func4(…){…}; var func5=new Function(); 这些都是声明函数的正确语法。它们和其他语言中常见的函数或之前介绍的函数定义方式有着很大的区别。那么在JavaScript中为什么能这么写？它所遵循的语法是什么呢？下面将介绍这些内容。 认识函数对象（Function Object） 可以用function关键字定义一个函数，并为每个函数指定一个函数名，通过函数名来进行调用。在JavaScript解释执行时，函数都是被维护为一个对象，这就是要介绍的函数对象（Function Object）。 函数对象与其他用户所定义的对象有着本质的区别，这一类对象被称之为内部对象，例如日期对象（Date）、数组对象（Array）、字符串对象（String）都属于内部对象。这些内置对象的构造器是由JavaScript本身所定义的：通过执行new Array()这样的语句返回一个对象，JavaScript内部有一套机制来初始化返回的对象，而不是由用户来指定对象的构造方式。 在JavaScript中，函数对象对应的类型是Function，正如数组对象对应的类型是Array，日期对象对应的类型是Date一样，可以通过new Function()来创建一个函数对象，也可以通过function关键字来创建一个对象。为了便于理解，我们比较函数对象的创建和数组对象的创建。先看数组对象：下面两行代码都是创建一个数组对象myArray： var myArray=[]; //等价于 var myArray=new Array();
Javascript鼠标事件大全 一般事件 事件浏览器支持描述 onClick IE3|N2|O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件onMouseDown IE4|N4|O 鼠标上的按钮被按下了onMouseUp IE4|N4|O 鼠标按下后，松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] 页面相关事件 事件浏览器支持描述 onAbort IE4|N3|O 图片在下载时被用户中断 onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件 onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误 onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成 onMove IE|N4|O 浏览器的窗口被移动时触发的事件onResize IE4|N4|O 当浏览器的窗口大小被改变时触发
1.我们可以在下列哪个HTML 元素中放置Javascript 代码？您的回答：