js中尺寸类样式

一:鼠标尺寸类样式

都要事件对象的配合

Tip:注意与浏览器及元素尺寸分开,鼠标类尺寸样式都是X,Y,浏览器及元素的各项尺寸时Height,Width

1:检测相对于浏览器的位置:event.clientX/event.clientY

client:整个浏览器的可视区域,当点击鼠标的时候,鼠标事件发生的位置距离浏览器可视区域的左边和上边的距离
clientX:鼠标事件发生的位置距离浏览器可视区域的左边的距离
clientY:鼠标事件发生的位置距离浏览器可视区域的上边的距离

2:检测相对于屏幕的位置event.screenX/event.screenY

screen:整个屏幕的大小,当鼠标点击的时候,鼠标事件发生的位置相对于屏幕的左边和上边的距离
event.screenX:鼠标事件发生的位置距离屏幕左边的距离
event.screenY:鼠标事件发生的位置距离屏幕上边的距离

  

3:检测相对于事件源的位置:event.offsetX/event.offsetY

Tip:注意这个事件源的模型,offset的检测是不包括边框的大小的,但是包括内边距,如果边框的大小为10px,那么最左边的X的距离为-10;

offset:相对于事件源,当鼠标事件发生时,相对于发生事件的事件源的左边的距离和上边的距离
event.offsetX:当鼠标事件发生时,相对于发生事件的事件源的左边的距离
event.offsetY:当鼠标事件发生时,相对于发生事件的事件源的上边的距离

4:检测相对于文档的位置:event.pageX/event.pageY

Tip:这个文档指的这个页面,页面在不发生滚动的情况下,浏览器的可视区域等于文档的可视区域,
这个时候event.clientX = event.offetX
一旦页面发生了滚动,那么滚动消失的距离,page是可以检测来的,这时候
event.cientX 与 event.pageX的距离是不相等的
page:页面文档,当页面发生了滚动的,早上文档顶部隐藏了一部分,pageX的距离还是从文档最顶的距离开始检测的
pageX:当鼠标事件发生时,鼠标相对于文档左边的位置(IE7,8没有)
pageY:当鼠标事件发生时,鼠标相对于文档上边的位置(IE7,8没有)

二:浏览器及元素各项尺寸

offsetParent:获取元素的最近的具有定位属性的父元素

1:元素.offsetWidth/元素.offsetHeight:元素的实际宽高

Tip:元素的实际宽高是包括边框的,指的是这个元素的全部

offset:针对元素的
offsetWidth:元素的宽度
offsetHight:元素的高度

  
2:元素.offsetLeft/元素.offsetTop,针对具有定位属性的父元素的左边和上边的距离

Tip:从边框的边缘开始检测的

offset:针对元素的
offsetLeft:元素对于具有定位属性的父元素的左边距
offsetTop:元素对于具有定位属性的父元素的上边距

3:元素.clientWidth/元素.clientHeight

client:不包括元素的边框
clientWidth:元素的可视宽度
clientHeight:元素的可视高度

4:元素.clientLeft/元素.clientTop

cilentLeft:当前元素的左边框的大小

clientTop:当前元素的上边框的大小

  

5:元素.scrollHeight/元素.scrollwidth

cilentLeft:当前元素的左边框的大小

clientTop:当前元素的上边框的大小

6:元素scrollTop/元素.scrollLeft

scrollTop:滚动条最顶端和可见内容的最顶端的距离
scrollLeft:滚动条最左端和可见内容的最左边的距离

  

js中尺寸类样式的更多相关文章

  1. <JavaScript>尺寸类样式的获取

    尺寸类样式的获取 offsetHeight HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数.(content+ ...

  2. JS中定义类的方法

    JS中定义类的方式有很多种: 1.工厂方式    function Car(){     var ocar = new Object;     ocar.color = "blue" ...

  3. JS中定义类的方法<转>

    转载地址:http://blog.csdn.net/sdlfx/article/details/1842218 PS(个人理解): 1) 类通过prototype定义的成员(方法或属性),是每个类对象 ...

  4. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  5. js中的类和对象以及自定义对象

    js中的类 1.类的声明 function Person(name,age){ this.name=name; this.age=age; this.test=function(a){ alert(a ...

  6. koa 基础(十七)原生 JS 中的类、静态方法、继承

    1.app.js /** * 原生 JS 中的类.静态方法.继承 * es5中的类和静态方法 */ function Person(name, age) { // 构造函数里面的方法和属性 this. ...

  7. 总结:js中4类修改样式的方法

    前言 最近在写一个扩展右键菜单的插件,既然是插件,想着一步到位,把相关的style样式设置都丢进js文件中,直接加载一个js文件便可以使用该插件,所以今天就研究了下js批量的插入样式的方法,即addS ...

  8. JS中获取CSS样式的方法

    1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...

  9. js中的类

    概述 经典的老书害人啊,全是讨论怎么解决javascript里面用函数形式定义类的坑.结果es2015直接用class关键字解决了所有问题.虽然class关键字没有什么新东西,只是js现有继承结构的语 ...

随机推荐

  1. git push 出现non-fast-forward的错误

    1.git push origin liu_0909:daily_liu_0909 出现non-fast-forward的错误,证明您的本地库跟远程库的提交记录不一致,即 你的本地库版本需要更新2.g ...

  2. Spark 源码分析系列

    如下,是 spark 源码分析系列的一些文章汇总,持续更新中...... Spark RPC spark 源码分析之五--Spark RPC剖析之创建NettyRpcEnv spark 源码分析之六- ...

  3. 在ts+vue中实现前端批量下载打包二维码

    ---恢复内容开始--- 一.插件安装 首先是插件的安装与引入,这里我们用的是qrcode的这个插件,直接使用npm install qrcodejs2安装即可,但是这里要注意,如果你用的是ts进行开 ...

  4. 【Android】java.lang.StackOverflowError: stack size 8MB

    最近遇到的问题,报了两个错误,如下: java.lang.StackOverflowError: stack size 8MB android.os.TransactionTooLargeExcept ...

  5. Ubuntu下python安装mysqldb(驱动)

    最近在学习Django框架,需要使用到数据库,我使用的是mysql,跟java一样,需要安装驱动,这是驱动的下载网址http://sourceforge.net/projects/mysql-pyth ...

  6. coffeescript 函数 箭头表达式

    函数 do可以形成闭包,使方法作用域不受外部变化的影响. 隐式返回最后一个表达式的值 函数调用省略括号 用arguments数组访问传递给函数的所有对象(低可读性) @name为this.name的简 ...

  7. Handler 使用详解

    极力推荐文章:欢迎收藏 Android 干货分享 阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android 本篇文章主要介绍 Android 开发中的部分知识点,通过阅读本篇文章,您将收获以 ...

  8. 编码规范 | Java函数优雅之道(上)

    导读 随着软件项目代码的日积月累,系统维护成本变得越来越高,是所有软件团队面临的共同问题.持续地优化代码,提高代码的质量,是提升系统生命力的有效手段之一.软件系统思维有句话“Less coding, ...

  9. Spring 2017 Assignments3

    一.作业要求 原版:http://cs231n.github.io/assignments2017/assignment3/ 翻译:http://www.mooc.ai/course/268/lear ...

  10. 阿里巴巴_java后端面经

    自我介绍不多说! 1 多线程有什么用?( 发挥多核CPU的优势 防止阻塞 便于建模 ) 2 怎么检测一个线程是否持有对象监视器( Thread类提供了一个holdsLock(Object obj)方法 ...