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 ...
随机推荐
- Redis集群之节点管理
Redis集群一旦启动,就不能轻易删除掉一个节点了. 需要由redis-trib.rg这个ruby脚本行使集群管理的功能.所有的哈希槽都分配于master节点 一.delete master node ...
- 【Spring 核心】AOP 面向切面编程
一.什么是面向切面编程? 二.通过切点来选择连接点 三.使用注解创建切面 四.在XML中声明切面 五.注入AspectJ切面
- 卸载oracle 11g数据库
完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->oracle - OraHome ...
- iOS开发笔记17:自定义相机拍照
之前用AVFoundation自定义相机做了拍照与视频相关的东西,为什么要自定义呢?主要是提供更个性化的交互设计,符合app主题,对于视频来说,也便于提供更多丰富有趣的功能.前段时间整理了下拍照部分的 ...
- scikit_learn入门
原文:http://www.cnblogs.com/taceywong/p/4568806.html 原文地址:http://scikit-learn.org/stable/tutorial/basi ...
- 深入理解HTTP协议—HTTP协议详解(真的很经典)
引言 HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1. ...
- 栈的实现Java
package practice; import java.util.Iterator; //栈 public class MyStack<T> implements Iterable&l ...
- 基于NIOS-II的示波器:PART2 界面动态显示功能
本文所有的硬件基础以及工程参考来自魏坤示波仪,重新实现驱动并重构工程. version 0.2 界面动态显示功能 界面显示功能原理 显示波形有如下两个方案: 每一帧直接重绘显示界面,再显示下一帧图形 ...
- unity3d在菜单栏,一键设置Player setting及自动打包并设置apk的存储位置
项目进行中,领导要求能够进行一键设置Player settings及自动打包并设置apk的位置,所以自己就上网搜索了很多大神的文章.最后是完成了领导需要的功能,在这里记录并分享一下(此项指针对安卓ap ...
- 1011. A+B和C (15)
/*1011. A+B和C (15) 时间限制150 ms内存限制65536 kB代码长度限制8000 B判题程序Standard作者HOU, Qiming给定区间[-231, 231]内的3个整数A ...