js的相关距离
js的相关距离
一、dom对象的距离
---dom.style.width : 对象本身的内容宽度(这里必须是内联样式中的width,带px)(content)
---dom.style.height:对象本身的内容高度(这里必须是内敛样式中的height,带px)(content)
---dom.clientWidth:对象本身的内容宽度+对象本身的内边距宽度(content+padding)
---dom.clientHeight:对象本身的内容高度+对象本身的内边距高度(content+padding)
---dom.scrollWidth:对象本身的内容宽度(包括溢出的宽度)+对象本身的内边距宽度(content+padding)
----dom.scrollHeight:对象本身的内容高度(包括溢出的高度)+对象本身的内边距高度(content+padding)
----dom.offsetWidth:对象本身占用的出外边距外的宽度(content+padding+border)
----dom.offsetHeight:对象本身占用的除外边距外的宽度(content+padding+border)
二、dom对象相对于其他元素的一些距离
----dom.offsetTop:对象自身相对于父级定位元素顶部的距离
----don.offsetLeft:对象自身相对于父级定位元素的左侧的距离
----dom.scrollTop:对象相对于文档的顶部高度
----dom.scrllLeft:对象相对于文档的左侧距离
三、事件对象相对于其他的元素的一些距离
----e.pageX:事件对象相对于文档的左上角的水平距离
----e.pageY:事件对象相对于文档的左上角的垂直距离
----e.clientX:事件对象相对于窗口的左上角的水平距离
----e.clientY:事件对象相对于窗口的左上角的垂直距离
----e.screenX:事件对象相对于电脑屏幕的左上角的水平距离
----e.screenY:事件对象相对于电脑屏幕的左上角的垂直距离
----e.offsetX(e.layerX):事件对象相对于事件源的左上角的水平距离
----e.offsetY(e.layerY):事件对象相对于事件源的左上角的垂直距离
js的相关距离的更多相关文章
- js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...
- node.js 使用----相关常用命令总结
node.js 使用----相关常用命令总结 1. 下载并安装node.js 2. 设置全局模块存放的目录 2.1 查看默认配置 npm config ls 2.2 修改全局模块存放目录 npm co ...
- JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离
壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...
- node.js及相关组件安装
第一步:下载安装文件(下载地址:官网http://www.nodejs.org/download/ )第二步:安装nodejs(双击直接安装) 安装完成后使用命令行查看版本信息,出现版本号说明安装成功 ...
- JS作用域相关知识(#精)
在学习<你不知道的JS>一书中,特将作用域相关知识在此分享一下: #说到作用域,就不得不提到LHS查询和RHS查询: 1)如果查询目的是对变量进行赋值,则使用LHS查询 2)如果查询目的是 ...
- js事件相关面试题
说是面试题,其实也相当于是对js事件部分知识点的一个总结.简单内容一笔带过,了解详情我都给出了参考链接,都是之前写的一些相关文章.JavaScript本身没有事件模型,但是环境可以有. DOM:add ...
- Cornerstone.js使用相关
官网地址:https://github.com/chafey/cornerstone 简介: Cornerstone is an open source project with a goal to ...
- JS - url相关
今天在找获取当前网址除去参数的js方式,结果自己会的竟然只有window.location.href 查到的一篇博文: http://www.cnblogs.com/weiyuxinghuacun/a ...
- js 事件相关 事件处理 封装 事件封装 DOM 0 2 3 级事件
1.绑定 function(element, type, handler){ if (element.addEventListener) { element.add ...
随机推荐
- C/C++ 公有函数无法返回私有的类对象解决方案
{ 能出这种错的说明还需要提升C++,增强对类的理解 解决方案:把你的私有的对象的私有的拷贝构造或者同类赋值改为公开的 }
- requestAnimationFrame动画封装
function Animator(duration, progress) { this.duration = duration; this.progress = progress; this.nex ...
- 二分查找总结及部分Lintcode题目分析 2
Search in a big sorted array,这个比之前的二分法模板多了一个很不同的特性,就是无法知道一个重要的条件end值,也是题目中强调的重点 The array is so big ...
- JS if 判断
if条件判断 1.语法结构——只判断true,不判断false if(条件判断:结果只有两个true或false) { 条件为true,将执行该代码: } 说明: if是系统关键字,必须全小写. ...
- 左神算法进阶班1_5BFPRT算法
在无序数组中找到第k大的数1)分组,每N个数一组,(一般5个一组)2)每组分别进行排序,组间不排序3)将每个组的中位数拿出来,若偶数,则拿上 / 下中位数, 成立一个一个新数组.4)新数组递归调用BF ...
- PostMan授权认证使用
Authorization 对于很多应用,出于安全考虑我们的接口并不希望对外公开.这个时候就需要使用授权(Authorization)机制. 授权过程验证您是否具有访问服务器所需数据的权限. 当发送请 ...
- HYNB Round 8: 2016 ICPC Amritapuri Regionals
HYNB Round 8: 2016 ICPC Amritapuri Regionals A - Tim and BSTs 做法 经典的树 DP 问题. \(dp[u][i]\) 表示考虑以 u 为根 ...
- Linux使用crontab定时执行Python脚本清理日志
Linux中,周期执行的任务一般由crond这个守护进程来处理.cron读取一个或多个配置文件,这些配置文件中包含了命令行及其调用时间.crond的配置文件称为"crontab", ...
- bind()的模拟实现
上一篇对call和apply的模拟实现做了一个梳理,可参见:模拟实现call.apply,下面将具体研究一下bind啦啦啦 1. bind和call/apply的差别 bind方法会创建一个新函数,返 ...
- [洛谷P3672]小清新签到题
题目描述 题目还是简单一点好. 给定自然数n.k.x,你要求出第k小的长度为n的逆序对对数为x的1~n的排列a1,a2...an,然后用仙人图上在线分支定界启发式带花树上下界最小费用流解决问题,保证存 ...