<!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. Grid++Report的几点总结

    一.同事解决方案: 1.在View文件夹下建立报表文件A,用来作为报表呈现的载体.这个页面负责加载报表模板与加载数据源.其中报表模板由于后缀名为grf,在MVC中不做任何修改的情况下,系统会做路由处理 ...

  2. HDU 4405 【概率dp】

    题意: 飞行棋,从0出发要求到n或者大于n的步数的期望.每一步可以投一下筛子,前进相应的步数,筛子是常见的6面筛子. 但是有些地方可以从a飞到大于a的b,并且保证每个a只能对应一个b,而且可以连续飞, ...

  3. nyoj 93 汉诺塔(三)

    点击打开链接 汉诺塔(三) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝 ...

  4. 项目管理: Maven 让事情变得简单

    http://maven.apache.org/,  Maven其实就是为java实现的一个构建工具.他比Ant更高端. 目前,绝大多数开发人员都把 Ant 当作 Java 编程项目的标准构建工具.遗 ...

  5. sizeof usage & big / little endian

    http://blog.csdn.net/w57w57w57/article/details/6626840 http://people.cs.umass.edu/~verts/cs32/endian ...

  6. Asp.net下载文件

    网站上的文件是临时文件, 浏览器下载完成, 网站需要将其删除. 下面的写法, 文件读写后没关闭, 经常删除失败. /// <summary> /// 下载服务器文件,参数一物理文件路径(含 ...

  7. Golang在windows下交叉编译linux程序

    1.下载相关程序. Golang下载:http://www.golangtc.com/download Git下载:http://git-scm.com/download/ TDM-GCC下载:htt ...

  8. Wordpress SEO对策（译）

    原文link http://netaone.com/wp/wordpress-seo-plugin/ 统一管理SEO对策的设定能够统一管理SEO相关设定的插件:All in One SEO Pack. ...

  9. 【测试】通过RMAN联机全库备份，包括控制文件，归档日志文件，备份成功后，删除已备份的归档日志。

    RMAN是一个很方便很好用的备份,恢复,还原的一个工具,做这个小测试其实只有一个RMAN语句就完全解决了这么大的需求: RMAN> backup as backupset full databa ...

  10. SQL 如果存在就更新，如果不存在就添加，使用 Merge 函数(SQL2008版本及以上)

    USE [NationalUnion] GO /****** Object: StoredProcedure [dbo].[proc_DataSummary] Script Date: 07/03/2 ...