标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题,导致掌握起来比较有难度,下面就介绍一下相关属性的用法。
先来看一张比较经典的示意图:

offsetTop属性:返回元素上外边缘距离最近采用定位父元素内壁的距离,如果父辈元素没有采用定位,则获取上外边缘距离文档内壁的距离

offsetLeft属性:和offsetTop属性同理

offsetWidth属性:返回元素的宽度,宽度包括:元素内容+内边距+边框

offsetHeight属性:和offsetWidth属性同理

clientWidth属性:返回元素的宽度,宽度包括:元素内容+内边距

clientHeight属性:和clientWidth属性同理

scrollLeft属性:获取或设置对象的最左边到对象在当前窗口显示的范围内的左边的距离,也就是元素被滚动条向左拉动的距离

scrollTop属性:获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离,也就是元素滚动条被向下拉动的距离

scrollHeight属性:网页正文全文高: document.body.scrollHeight

关于这几个属性的一些其他讲解https://blog.csdn.net/bobobocai/article/details/78604169

拖拽div

<style type="text/css">
#dv {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
position: absolute;
}
</style>
<div id="dv"></div>
<script type="text/javascript">
//获取元素
var dv = document.getElementById('dv');
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var isDown = false; //鼠标按下事件
dv.onmousedown = function(e) {
//获取x坐标和y坐标
x = e.clientX;
y = e.clientY; //获取左部和顶部的偏移量
l = dv.offsetLeft;
t = dv.offsetTop;
console.log(l)
//开关打开
isDown = true;
//设置样式
dv.style.cursor = 'move';
} //鼠标移动
window.onmousemove = function(e) {
if(isDown == false) {
return;
}
//获取x和y
var nx = e.clientX;
var ny = e.clientY;
//计算移动后的左偏移量和顶部的偏移量
var nl = nx - (x - l);
var nt = ny - (y - t); dv.style.left = nl + 'px';
dv.style.top = nt + 'px';
} //鼠标抬起事件
dv.onmouseup = function() {
//开关关闭
isDown = false;
dv.style.cursor = 'default';
}
</script>

JS之scrollTop、offsetHeight和offsetTop等属性用法详解和拖拽div的更多相关文章

  1. js原生之scrollTop、offsetHeight和offsetTop等属性用法详解

    scrollTop.offsetHeight和offsetTop等属性用法详解:标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容 ...

  2. scrollTop、offsetHeight和offsetTop等属性用法详解--转转转

    scrollTop.offsetHeight和offsetTop等属性用法详解: 标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼 ...

  3. [js高手之路] dom常用节点属性兼容性详解与应用

    一.每个DOM节点都有一个nodeType属性,表示节点类型, NodeType一共有12种类型,我们可以通过遍历内置的Node构造函数获取 window.onload = function(){ v ...

  4. js的offsetWidth,offsetHeight,offsetLeft,offsetTop

    js的offsetWidth,offsetHeight,offsetLeft,offsetTop

  5. JS拖拽div(移动)

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  6. js replace 与replaceall实例用法详解

    这篇文章介绍了js replace 与replaceall实例用法详解,有需要的朋友可以参考一下stringObj.replace(rgExp, replaceText) 参数 stringObj 必 ...

  7. ES6 类(Class)基本用法和静态属性+方法详解

    原文地址:http://blog.csdn.net/pcaxb/article/details/53759637 ES6 类(Class)基本用法和静态属性+方法详解 JavaScript语言的传统方 ...

  8. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  9. CSS3教程:pointer-events属性值详解 阻止穿透点击

    转:http://www.poluoluo.com/jzxy/201109/142876.html 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样 ...

随机推荐

  1. DOM 操作属性

    DOM操作就是针对对象的操作 先写一个按钮,<input tupe="button" value=""  id="id">  这 ...

  2. Mongo client - cross-platform MongoDB management tool

    Mongo client for Ubuntu or Windows http://robomongo.org/download.html

  3. c++ 拷贝构造函数 继承

    拷贝构造函数要求把所有变量都需要做拷贝.在有继承关系情况先,子类的拷贝构造函数,需要调用父类拷贝构造函数.示例代码如下: class Base{ public: virtual ~Base(); Ba ...

  4. C++面试笔记--单链表

    1.编程实现单链表删除节点.       解析:如果删除的是头节点,如下图: 则把head指针指向头节点的下一个节点.同时free p1,如下图所示: 如果删除的是中间节点,如下图所示: 则用p2的n ...

  5. KMS激活工具

    工具介绍 KMS_VL_ALL,国外MDL论坛的一款KMS激活工具,可自动识别需要激活的Windows以及Office的VL版本,无需联网即可全自动检测激活,支持创建自动续期计划,相比于国外的同类工具 ...

  6. window 启用 windows 自动登录

    启用 windows 自动登录 方案一: 1.运行命令:control userpasswords2 2.取掉复选框的钩: 方案二:(方案一无效的时候使用) 微软官网地址:https://suppor ...

  7. 通过pip3安装virtualenvwrapper

    pip3 install virtualenvwrapper 配置virtualenvwrapper创建虚拟环境的目录和指定python3版本 环境编辑当前用户配置变量 mkdir ~/.virtua ...

  8. 4、OpenCV Python 像素运算

    __author__ = "WSX" import cv2 as cv import numpy as np #前提需要运算的图像大小和类型完全相同 #算术运算 加减乘除 #逻辑运 ...

  9. 模板 ST表

    ST表 询问静态最值. code: #include <iostream> #include <cstdio> using namespace std; inline int ...

  10. cocos2d 3.3 安装教程

    最近在学习cocos-2d,百度一下cocos-2d,铺天盖地的都是cocos-2dx的教程,不得不说,老外还是钟情cocos2d,之前安装过cocos2d 2.0版本,网上的教程还是都是0.9的安装 ...