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 ...
随机推荐
- Zepto源码分析(二)奇淫技巧总结
Zepto源码分析(一)核心代码分析 Zepto源码分析(二)奇淫技巧总结 目录 * 前言 * 短路操作符 * 参数重载(参数个数重载) * 参数重载(参数类型重载) * CSS操作 * 获取属性值的 ...
- LAMP环境的搭建(二)----Mysql安装与配置
Mysql是一款免费开源的关系型数据库. 尽管Mysql被oracle公司收购.但是oracle并没有限制了mysql的发展. 目前mysql是使用范围最广的关系型数据库,许多大型公司也在使用.截至本 ...
- 7.21.04 for循环
for循环的三个语句可以放置任何表达式,但是有个不成文的规则,for循环的3个部分应当对同一个计数器变量进行初始化,检测和更新.若不遵循这一规则,编写的循环常常晦涩难懂! 如果在循环第一部分声明了一个 ...
- MongoDB分布式集群搭建(分片加副本集)
# 环境准备 服务器 # 环境搭建 文件配置和目录添加 新建目录的操作要在三台机器中进行,为配置服务器新建数据目录和日志目录 mkdir -p $MONGODB_HOME/config/data mk ...
- POI设置excel添加列下拉框
POI在生成excel模板时需要为列添加下拉框,我写了两个方法. @ 方法一:适用任何情况,不受下拉框值数量限制.但是需要通过引用其它列值. 思路大概如下: 1.创建一个隐藏的sheet页,用于存放下 ...
- git 工作流介绍
GIT Git工作流你可以理解为工作中团队成员遵守的一种代码管理方案,在Git中有以下几种工作流方案作为方案指导: 集中式工作流 功能开发工作流 Gitflow工作流 Forking工作流 下面针对性 ...
- MyBatis --- 动态SQL、缓存机制
有的时候需要根据要查询的参数动态的拼接SQL语句 常用标签: - if:字符判断 - choose[when...otherwise]:分支选择 - trim[where,set]:字符串截取,其中w ...
- 大数问题:打印从1到最大的n位数
//打印从1到最大的n位数:大数问题,用字符串表示数字来避免溢出 bool increment(char* number){ bool isOverFlow = false; int nTakeOve ...
- C++中4个类型转换相关的关键字/特点/应用场合
reinterpret_cast是C++里面的一个强制类型转换符,能够将任何的指针类型转换成其他的任何指针类型:能够将任何的整数类型转换成指针类型,反之亦然:滥用reinterpret_cast强制类 ...
- 比较三个 CSS 预处理器:Sass、LESS 和 Stylus(上)
前沿 : 第一次写不够成熟,可能描述有所错误,还请大家修改指正,我会对已完成的文章进行修改. 一.什么是CSS预处理器 CSS预处理器定义了一种新的语言,基本的思想是用一种专门的编程语言,开发者只需要 ...