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的相关距离的更多相关文章

  1. js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

    做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

  2. node.js 使用----相关常用命令总结

    node.js 使用----相关常用命令总结 1. 下载并安装node.js 2. 设置全局模块存放的目录 2.1 查看默认配置 npm config ls 2.2 修改全局模块存放目录 npm co ...

  3. JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离

     壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...

  4. node.js及相关组件安装

    第一步:下载安装文件(下载地址:官网http://www.nodejs.org/download/ )第二步:安装nodejs(双击直接安装) 安装完成后使用命令行查看版本信息,出现版本号说明安装成功 ...

  5. JS作用域相关知识(#精)

    在学习<你不知道的JS>一书中,特将作用域相关知识在此分享一下: #说到作用域,就不得不提到LHS查询和RHS查询: 1)如果查询目的是对变量进行赋值,则使用LHS查询 2)如果查询目的是 ...

  6. js事件相关面试题

    说是面试题,其实也相当于是对js事件部分知识点的一个总结.简单内容一笔带过,了解详情我都给出了参考链接,都是之前写的一些相关文章.JavaScript本身没有事件模型,但是环境可以有. DOM:add ...

  7. Cornerstone.js使用相关

    官网地址:https://github.com/chafey/cornerstone 简介: Cornerstone is an open source project with a goal to ...

  8. JS - url相关

    今天在找获取当前网址除去参数的js方式,结果自己会的竟然只有window.location.href 查到的一篇博文: http://www.cnblogs.com/weiyuxinghuacun/a ...

  9. js 事件相关 事件处理 封装 事件封装 DOM 0 2 3 级事件

    1.绑定 function(element, type, handler){        if (element.addEventListener) {            element.add ...

随机推荐

  1. 双线程DP

    1.传纸条 好像是一道普及组水题? //Twenty #include<cstdio> #include<iostream> #include<cstring> # ...

  2. hibernate_04_hibernate多对多的关系映射

    1.实体类的多对多的关系映射 一个用户可以有多个角色 User.java public class User { private Long user_id; private String user_c ...

  3. 分类算法之朴素贝叶斯分类(Naive Bayesian classification)

    分类算法之朴素贝叶斯分类(Naive Bayesian classification) 0.写在前面的话 我个人一直很喜欢算法一类的东西,在我看来算法是人类智慧的精华,其中蕴含着无与伦比的美感.而每次 ...

  4. PHP面向对象魔术方法之__toString函数

    l 基本介绍: 当我们希望将一个对象当做字符串来输出时,就会触发__toString魔术方法. <?php header('content-type:text/html;charset=utf- ...

  5. PAT甲级——A1121 Damn Single【25】

    "Damn Single (单身狗)" is the Chinese nickname for someone who is being single. You are suppo ...

  6. dashboard服务

    1.上传镜像,并导入,打标签 2.创建dashboard的deployment和service apiVersion: extensions/v1beta1 kind: Deployment meta ...

  7. 16.ajax_case06

    # 抓取华尔街见闻实时快讯 # https://wallstreetcn.com/live/global?from=navbar import requests import json header ...

  8. shell脚本练习05

    ######################################################################### # File Name: -.sh # Author ...

  9. wangEditor富文本框——例

    官方文档:http://www.wangeditor.com/ 效果 html <!DOCTYPE html> <html> <head> <meta cha ...

  10. java_瞬时

    瞬时(Instant): 方法: public class InstantTest01 { public static void main(String[] args){ //静态方法,返回utc上的 ...