<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性检测</title>
<style>
*{margin: 0;padding:0;border:none;}
#tip{
width:400px;
height:300px;
}
#T{
width:400px;
height:200px;
margin-left:10px;
margin-top: 10px;
border-width: 100px;
border-style: solid;
border-top-color: blue;
border-right-color: red;
border-bottom-color: orange;
border-left-color:black;
background: green;
padding-left: 100px;
padding-top: 100px;
text-align:left;
padding-left-color: white;
color:orange;
overflow: scroll;
}
body{ }
</style>
</head>
<body>
<textarea id='tip'></textarea>
<div id='T'>
12312123112312123123121231123121231231212311231212312312123112312123
</div>
<script type="text/javascript">
var T=document.getElementById('T');
T.onmousemove=function(e){
var T=document.getElementById('T');
var clientWidth=T.clientWidth;
var clientHeight=T.clientHeight;
var offsetWidth=T.offsetWidth;
var offsetHeight=T.offsetHeight;
var scrollWidth=T.scrollWidth;
var scrollHeight=T.scrollHeight;
var scrollTop=T.scrollTop;
var scrollLeft=T.scrollLeft;
var screenTop=window.screenTop?window.screenTop:window.screenY;//火狐screenX
var screenWidth=window.screen.width;
var availWidth=window.screen.availWidth;
var offsetLeft=T.offsetLeft;
var offsetTop=T.offsetTop;
var clientTop=T.clientTop;
var offsetParent=T.offsetParent;
var pageX=e.pageX;
var pageY=e.pageY;
var clientX=e.clientX;
var clientY=e.clientY;
var screenX=e.screenX;
var offsetX=e.offsetX;
var offsetY=e.offsetY; var tip="clientWidth:"+clientWidth+" clientHeight:"+clientHeight+"\r\n";
tip+="offsetWidth:"+offsetWidth+" offsetHeight:"+offsetHeight+"\r\n";
tip+="scrollWidth:"+scrollWidth+" scrollHeight:"+scrollHeight+"\r\n";
tip+="scrollTop:"+scrollTop+" scrollLeft:"+scrollLeft+"\r\n";
tip+="screenTop:"+screenTop+"\r\n";
tip+="screen.width:"+screenWidth+"\r\n";
tip+="screen.availWidth:"+availWidth+"\r\n";
tip+="offsetLeft:"+offsetLeft+" offsetTop:"+offsetTop+"\r\n";
tip+="clientTop:"+clientTop+"\r\n";
tip+="offsetParent:"+offsetParent+"\r\n";
tip+="pageX:"+pageX+" pageY:"+pageY+"\r\n";
tip+="clientX:"+clientX+" clientY:"+clientY+"\r\n";
tip+="offsetX:"+offsetX+" offsetY:"+offsetY+"\r\n";
document.getElementById('tip').value=tip;
} </script> </body>
</html>

Js位置定位控制

某个盒子:出现滚动条时 可见宽度=(width-滚动条宽度)

某个元素下的属性

clientWidth:可见区域的宽度=(width-滚动条宽度(有时)+padding)

clientTop: 获取对象的border宽度

offsetWith:(border+width+padding)

offsetLeft: 当前对象到其上级层左边的距离

offsetParent:获取当前对象的上级层对象

scrollWidth:网页正文全文宽=(没滚动条时=clientWidth,没滚条时=client+拉动滚条才能看到的区域)

scrollLeft:有滚条时左边被隐藏的长度

scrollWidth=(scrollLeft(拉到最右时)+clientWidth)

下面事件属性

window.screenTop(只读属性)浏览器窗口上边距屏幕顶端距离(适用与chrome firefox下screenX,IE下是网页正文距屏幕上边界距离(scrollTop))

window.screen.width(屏幕分辨率)

window.screen.availWidth(屏幕可用工作区宽度等于分辨率宽)

window.pageX:鼠标的横坐标以当前文档开始为基准(以当前整个文档为基准(包括margin,border,padding等))

window.clientX:鼠标的横坐标以当前浏览器窗口为基准

没滚动条时pageX=clientX;

IE没pageX

在ie下pageX=clientX+scrollTop-clientTop(border-width (chrome测试无需减掉))

window.offsetX(鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点)

与clientX区别(clientX以浏览器窗口为基准)

js浏览器各种位置检测的更多相关文章

  1. 前端(十一)—— JavaScript基础:JS存在的位置、JS变量定义、调试方式、JS数据类型、运算符

    JS存在的位置.JS变量定义.调试方式.JS数据类型.运算符 一.JS语言介绍 1.概念 浏览器脚本语言 可以编写运行在浏览器上的代码程序 属于解释性.弱语言类型编程语言 2.组成 ES语法:ECMA ...

  2. JS代码的位置与事件响应代码块的封装问题

    JS代码的位置       我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分.   放在<head>部分最常用的方式是在页面中h ...

  3. JS代码放置位置、变量与数据类型、运算符与逻辑表达运算符

    内容简要: 1.JS代码放置位置的问题: 2.变量与数据类型: 3.运算符与逻辑表达式的运算符   我的位置 全局问题:为何在网页推荐位置(一般在<head></head>内部 ...

  4. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  5. js获取元素位置和style的兼容性写法

    今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...

  6. JS和css实现检测移动设备方向的变化并判断横竖屏幕

    这篇文章主要介绍了JS和css实现检测移动设备方向的变化并判断横竖屏幕,本文分别给出实现代码,需要的朋友可以参考下 方法一:用触发手机的横屏和竖屏之间的切换的事件  [自测可用, chrome , 手 ...

  7. Node.js event loop 和 JS 浏览器环境下的事件循环的区别

    Node.js  event loop 和 JS 浏览器环境下的事件循环的区别: 1.线程与进程: JS 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程? 进程是 CPU ...

  8. atitit.js浏览器环境下的全局异常捕获

    atitit.js浏览器环境下的全局异常捕获 window.onerror = function(errorMessage, scriptURI, lineNumber) { var s= JSON. ...

  9. Atitit.android js 的键盘按键检测Back键Home键和Menu键事件

    Atitit.android js 的键盘按键检测Back键Home键和Menu键事件 1. onKeyDown @Override public boolean onKeyDown(int keyC ...

随机推荐

  1. [kuangbin带你飞]专题二十二 区间DP

            ID Origin Title   17 / 60 Problem A ZOJ 3537 Cake   54 / 105 Problem B LightOJ 1422 Hallowee ...

  2. nyoj 70 阶乘因式分解(二)

    点击打开链接 阶乘因式分解(二) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 给定两个数n,m,其中m是一个素数. 将n(0<=n<=2^31)的阶乘分解 ...

  3. oracle 11g 服务端下载地址及安装说明

        oracle 11g 服务端下载地址及安装说明         分类:             Oracle              2013-11-17 19:40     988人阅读  ...

  4. 配置Tomcat数据源

    1.方式一:在server.xml中配置 1)tomcat安装路径下conf目录下的server.xml,在<GlobalNamingResources>和</GlobalNamin ...

  5. [转]使用 HttpClient 和 HtmlParser 实现简易爬虫

    http://www.ibm.com/developerworks/cn/opensource/os-cn-crawler/ http://blog.csdn.net/dancen/article/d ...

  6. css margin-top设置html元素之间的距离

    css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...

  7. IOS开发-phonegap上的数据库

    phonegap提供的本地数据库功能不可用,最终请教高手后使用SQLitePlugin插件来实现.网上很多都是介绍IOS插件如何编程,少有介绍如何使用插件: 一.插件安装: 1.下载,解压,复制以下文 ...

  8. DP三角形

    Hrbust1038  http://acm.hrbust.edu.cn/index.php?m=ProblemSet&a=showProblem&problem_id=1038 // ...

  9. 关于 C/C++ 的文章

    关于 C/C++ 的文章,以前写的博客在百度,百度关了,只能一个一个复制了,百度太.....

  10. 009 The Interfaces In JAVA(官网文档翻译)

    Interfaces There are a number of situations in software engineering when it is important for dispara ...