JavaScript中的位置屬性

屏幕中的位置(直接使用,無需前綴):

screenLeft、screenTop:除了火狐都支持

screenX、screenY:

窗口的大小(谷歌的inner=outer,直接使用,無需前綴):

innerWidth、innerHeight:頁面的長、高

outerWidth、outerHeight:頁面+邊框の長、高

HTML的大小:

document.documentElement.clientWidth:同innerWidth

document.documentElement.clientHeight:同innerHeight

Body的大小:

document.body.clientHeight:高

document.body.clientWidth:寬

某個元素的大小:

var p=document.getElementById(‘p‘)[0];

p.clientWidth、p.clientHeight:border、margin不算入其內,padding算入其內,scroll(滾動條)會減小其大小。

p.scrollWidth、p.scrollHeight:margin不算入其內,padding會增加,scroll會減小,border各瀏覽器解釋不同。

p.offsetWidth、p.offsetHeight:border和padding會增加,margin和scroll不算入其內。兼容性最好

某個元素的屬性大小:

p.clientLeft、p.clientTop:邊框的大小(沒有right和bottom)

p.offsetLeft、p.offsetTop:相對於父元素的位置(像素)

p.offsetParent:獲得父元素

滾動條顯示區域相對於初始位置的值:

document.documentElement.scrollTop

document.documentElement.scrollLeft

滾動條顯示區域相對於初始位置的值<IE6支持>:

document.body.scrollTop

document.body.scrollLeft

轉《html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍》

scrollWidth:获取对象的滚动宽度

scrollHeight: 获取对象的滚动高度

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetHeight:获取对象相对于版面或由父坐标offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

JavaScript中建造迁移转变代码的常用属性

网页可见区域宽: document.body.clientWidth;

网页可见区域高: document.body.clientHeight;

网页可见区域宽: document.body.offsetWidth (包含边线的宽);

网页可见区域高: document.body.offsetHeight(包含边线的宽);

网页正文全文宽: document.body.scrollWidth;

网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;

网页被卷去的左: document.body.scrollLeft;

网页正文项目组上: window.screenTop;

网页正文项目组左: window.screenLeft;

屏幕辨别率的高: window.screen.height;

屏幕辨别率的宽: window.screen.width;

屏幕可用工作区高度: window.screen.availHeight;

时间: 2024-08-05 06:30:04

JavaScript中的位置屬性的相关文章

理解JavaScript和jQuery中的位置与尺寸

Part 1 JavaScript中的位置和尺寸 一.元素的位置 1. offsetLeft:offsetTop(只读) 相对于offsetParent边框左上角的坐标. 什么是offsetParent? 某元素的offsetParent就是离该元素最近的定位父元素,如果没有定位父元素,那么offsetParent就是body. 2.scrollLeft:scrollTop(可设置) 由于滚动而被遮挡的内容区域左上方部分的宽高. 仅仅对页面和设置了overflow的元素有效,(因为只有它们的内容

ToolStrip和MenuStrip控件簡介及常用屬性(转)

ToolStrip和MenuStrip實際上是相同的控件,因為MenuStrip直接派生於ToolStrip.也就是說ToolStrip可以做的工作,MenuStrip也能完成. ToolStrip(工具欄)是ToolStripButton.ToolStripComboBox.ToolStripSplitButton.ToolStripLabel.ToolStripSeparator.ToolStripDropDownButton.ToolStripProgressBar 和 ToolStrip

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

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

C++、Java、JavaScript中的异常处理(Exception)

编程思想之异常处理 什么叫异常处理? 什么叫异常(Exception)?顾名思义就是非正常的情况,出现了不希望出现的意外,异常处理就是遇到这种意外时准备的对策和解决方案.比如您开着一辆劳斯莱斯在公路上行走,突然前面出现一个小孩,幸好您眼疾手快紧急刹车,而避免了一场交通事故.在这个例子中突然出现的小孩就是异常,紧急刹车就是异常处理(面对这种突发情况采取的解决方案). 程序来源于现实,是现实的抽象和模拟,也会有异常,因此异常的处理就显示的极为重要.试想如果您的手机的某个应用使用两下就崩溃了,或都出现

JavaScript中的字符串操作

JavaScript中的字符串操作 一.概述    字符串在JavaScript中几乎无处不在,在你处理用户的输入数据的时候,在读取或设置DOM对象的属性时,在操作cookie时,当然还有更多....JavaScript的核心部分提供了一组属性和方法用于通用的字符串操作,如分割字符串,改变字符串的大小写,操作子字符串等.    当前的大部分浏览器也能从强大的正则表达式获益,因为它极大地简化了大量的字符串操作任务,不过它也需要你克服一条有些陡峭的学习曲线.在这里,主要是介绍字符串本身的一些操作,正

了解javascript中的事件(一)

零.寒暄 由于刚入职,近期事情繁多,今天好不容易中期答辩完事,晚上有一些时间,来给大家分享一篇博文. 这段时间每天写js接触事件比较多,自己会使用,但是用的时候比较混乱,现在系统的整理下,好了,闲话不多说,谈正事! 一.事件概念 什么是事件?说白了,事件是文档或浏览器中发生的特定交互瞬间!比如鼠标点击,滑过等等. 二.事件流 事件流就是描述了页面中接受事件的顺序.在浏览器发展的初期,两大浏览器厂商IE和Netscape互掐,出现了一个坑爹的情况,那就是他们对事件流的解释出现了两中截然相反的定义.

JavaScript中原型对象的彻底理解

一.什么是原型 原型是Javascript中的继承的继承,JavaScript的继承就是基于原型的继承. 1.1 函数的原型对象 ? 在JavaScript中,我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B,而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即:prototype的属性的值是这个对象 ).这个对象B就是函数A的原型对象,简称函数的原型.这个原型对象B 默认会有一个属性 constructor 指向了这个函数A ( 意思就是说:c

JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 exec方法的返回值 exec方法返回的其实并不是匹配结果字符串,而是一个对象,简单地修改一下execReg函数,来做一个实验就可以印证这一点: function execReg(reg, str) { var result = reg.exec(str); alert(typeof result

javascript中ilter方法

array1.filter(callbackfn[, thisArg]) 參數 參數 定義 array1 必要項. 陣列物件. callbackfn 必要項. 最多接受三個引數的函式. filter 方法會針對陣列中的每個元素各呼叫 callbackfn 函式一次. thisArg 選擇項. this 關鍵字可在 callbackfn 函式中參考的物件. 如果省略 thisArg,則 this 的值就是 undefined. 傳回值 新陣列,其中包含回呼函式針對來源陣列傳回 true 的所有元素