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');
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;
JavaScript中的位置屬性的更多相关文章
- 善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度
在很久以前我們都是用 Table 在排版的,我相信現在還是有不少人還是在用 Table 進行排版而非現在較為流行的 CSS 排版,使用 Table 排版最大的好處就是版面在各瀏覽器中顯示比較不會亂掉. ...
- ToolStrip和MenuStrip控件簡介及常用屬性(转)
ToolStrip和MenuStrip實際上是相同的控件,因為MenuStrip直接派生於ToolStrip.也就是說ToolStrip可以做的工作,MenuStrip也能完成. ToolStrip( ...
- JavaScript中的各种宽高以及位置总结
JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...
- JavaScript中的内置对象-8--1.Array(数组)-Array构造函数; 数组的栈方法; 数组的转换方法; 数组的操作方法; 删除-插入-替换数组项; ECMAScript为数组实例添加的两个位置方法;
JavaScript内置对象-1Array(数组) 学习目标 1.掌握任何创建数组 2.掌握数值元素的读和写 3.掌握数组的length属性 如何创建数组 创建数组的基本方式有两种: 1.使用Arra ...
- JavaScript中各存在性函数
JavaScript中有很多表示存在性和从属关系的函数,本文介绍如下几个: 1)有关实例与构造函数原型之间的关系:isPrototypeOf(),Object.getPrototypeOf(); 2) ...
- javascript检索某个字符或字符串在源字符串中的位置(下标)
indexOf()方法 JavaScript中的String对象提供了一个indexOf(searchValue, fromIndex)方法用于检索某个字符或字符串在源字符串中第一次出现的位置(下标) ...
- 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...
- 使用 JavaScript 中的变量、数据类型和运算符,计算出两个 number 类型的变量与一个 string 类型的变量的和,根据 string 类型处于运算符的不同位置得到不同的结果
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的变量.数据类型和运算符,计算出两个 number 类型的变量与一个 string 类型的变量的和,根据 string 类型处于运算 ...
- JavaScript 中的数据类型
Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...
随机推荐
- windows 资源监视器
windows的资源监视器有很强大的资源监视能力 win+r输入resmon.exe即可打开
- 【Weblogic】在linux创建domain过慢的解决方法
修改Linux上Weblogic使用的jdk $JAVA_HOME/jre/lib/security/java.security 文件 将 securerandom.source=file:/dev/ ...
- SpringMVC参数绑定(从请求中接受参数)
参数绑定(从请求中接收参数) 1)默认类型: 在controller方法中可以有也可以没有,看自己需求随意添加. httpservletRqeust,httpServletResponse,httpS ...
- 简说JS中的循环部分
JS中的循环语句是JS基础的最最重要的部分,没有之一,后面所学的其他的一些重要的知识也是需要在此的基础啥古玩城更高级的设置,先来简单的说一下循环的一些知识点. 一.循环结构的执行步骤 1.声明循环变量 ...
- 接口测试 mock server 工具moco学习笔记
看过乙醇分享的接口测试,自己练习了moco,这里呢,吧一些练习的笔记坐下记录,方便自己查阅. 开源地址https://github.com/dreamhead/moco , 到QuickStart ...
- 关于 struts2 Unable to load configuration. - action
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "- ...
- 设置input框文字垂直居中和宽度
input { solid #999;height:22px; background:#ffffff; line-height:22px; margin:0px; padding:0px;/*表单输入 ...
- 怎样通过js 取消input域的hidden属性使其变的可见
document.getElementById(ID).setAttribute("hidden",false);厉害了 我的哥!
- 微信中通过页面(H5)直接打开本地app的解决方案
简述 微信中通过页面直接打开app分为安卓版和IOS版,两个的实现方式是完全不同的. 安卓版实现:使用腾讯的应用宝,只要配置了“微下载”之后,打开链接腾讯会帮你判断本地是否已经安装了app,如果本地安 ...
- [C]字符串排序之-冒泡法
在oj刷题,遇见一题字符串排序题. 脑海里瞬间闪过数组排序. 思路有了,打开题解看看别人的思路,发现好多人的排序方法显得比较臃肿,可能也是我的水平不够,欣赏不来吧. 不过用冒泡法排序的时候一定要记得字 ...