offset,client,scroll三者的区别

最新推荐文章于 2022-12-02 21:06:28 发布
最新推荐文章于 2022-12-02 21:06:28 发布
阅读量389 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41098713/article/details/83655415
版权

offset,client,scroll三者的区别

  1. offset：鼠标距离父盒子带有定位的距离，调用者为任意元素；
  2. client：鼠标距离浏览器可视区域的距离，调用者为e；
  3. scroll：获取浏览器无法显示的区域，调用者为window

下面是在页面中实现图片的拖动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在当前页面实现图片拖动</title>
    <style>
        #img{
            background: url("images/xiaoxin.gif");
            width: 200px;
            height: 200px;
            background-size: 100%;
            position: fixed;
        }
    </style>
</head>
<body>
<div id="img"></div>
</body>
</html>
<script>
var move=false,offsetX,offsetY;
console.log(img);
img.onmousedown=function (e) {
    move=true;
    offsetX=e.offsetX;
    console.log(1);

    offsetY=e.offsetY;
}
window.onmousemove=function (e) {
    if(move){
        var top=e.clientY-offsetY;
        var left=e.clientX-offsetX;
        img.style.top=top+"px";
        img.style.left=left+"px";

    }
}
img.onmouseup=function() {
    move=false;
}
</script>

在这里插入图片描述

qq_41098713
关注
offset、client、scroll
m0_46978034的博客
03-22 428
文章目录1.元素偏移量offset系列 1.元素偏移量offset系列 1.offset系列相关属性可以动态的得到元素该元素的位置(偏移)/大小。 注意点 获得元素距离带有定位父元素的位置，如果父元素没有定位则以body为准 获得元素自身的大小（宽度） 返回的数值都是不带单位的 offset常用属性 代码演示如下 <style> .father { position: relative; width: 200px;
三大家族scroll、offset、client
梅花寺
03-08 690
三大家族区别offset家族 offsetHeight: 元素高，height+border+padding offsetWidth: 元素宽，width+border+padding offsetTop: 上边距离带有定位的父盒子的距离（重要） offsetLeft: 左边距离带有定位的父盒子的距离（重要） offsetParent: 最近的带有定位的父盒子。
scroll、offset和client的区别
weixin_30437337的博客
04-22 126
整体布局： <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>比较</title> <style type="text/css"> *{ padding: 0; ...
client offset scroll的区别
weixin_30760895的博客
06-29 134
client offset scroll 三大家族 javaScript中的client offset scroll 经常用到，为了区分三者之间的区别，总结了一下： clientWidth：获取网页可视区域的宽度(两种用法) clientHeight： 获取网页可视区域的高度(两种用法) clientX： 鼠标距离可视区域左侧的距离(event调用) clientY：鼠标距离可视区域上侧的距离(e...
scroll、offset和client如何区分
qq_36309066的博客
12-07 397
DOCTYPE> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>比较title> style type="text/css"> *{     padding: 0;     margin: 0; } body{
offset、client、scroll的区别
qq_52303179的博客
05-16 196
offset、client、scroll的区别 offset 偏移量：offset dimension 1、offsetHeight: 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。 2、offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。 **3、offsetLeft：**元素的左外边框至包含元素的左内边框之间的像素距离。 4、offsetTop：元素的上外
请讲一讲JavaScript中offset，scroll，client，三者的作业与区别
最新发布
03-27
在JavaScript中，offset、scroll和client都是针对元素位置和大小的属性。 1. offset offset指的是一个元素相对于其定位父元素的位置。offset包含了元素的位置（left和top）和大小（width和height），以像素为单位...
JavaScript中offset、client、scroll、screen、page五大系列
m0_48982503的博客
09-18 619
一、offset系列 1. offsetX、offsetY 获取鼠标指针位置相对于触发事件的对象的 x 坐标和y坐标。offsetX （offsetY）规定了事件对象与目标节点的内填充边（padding edge）在 X （Y）轴方向上的偏移量。 注意：offsetX（offsetY）与clientX（cilentY）的区别是，前者是相对于触发事件的对象的坐标，而后者是相对于浏览器可视区域的坐标。IE8不支持事件参数e，要想使用事件参数对象必须是window.event。 2. offsetP.
27 【三大家族scroll、offset、client】
DSelegent的博客
08-25 249
27 【三大家族scroll、offset、client】
js学习-17（offset和scroll）
qq_42760119的博客
07-31 379
一、offset家族 三大家族：offset、scroll、client offset：偏移、补偿、位移 offset家族：是js中一套获取元素尺寸 的方法。 offset家族包括：offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent 1、offsetWidth和offsetHeight offsetwidth = content + padding + border offsetHeight = content + padding + bor
动画以及封装
Llishiyi的博客
12-01 145
js的动画如何实现 利用js的事件，配合定时器，或者改变它的样式属性，比如颜色，位置等来完成 js动画的封装 把你要用到的常用动画自己封装起来（学会封装的思路），函数的本质就是把具有特点功能的代码封装在一起，所以，我们可以将动画中可变化的量当做参数进行封装。 一.offset、client、scroll系列 offset系列 offsetLeft:获取元素距离最左边的距离： (1)、如果父元素没有定位，距离浏览器最左侧的距离 (2)、如果父元素有定位，距离父元素最左侧的距离 offsetT
offset、client、scroll有什么区别
weixin_53339654的博客
12-02 92
clientWidth和clientHeight：获取可视范围的宽度高度，不包括border，包括padding.offsetHeight:获取元素的高度，包括border及以内，不包括margin。offsetWidth:获取元素的宽度，包括border及以内，不包括margin。scrollTop和scrollLeft:获得的是内容卷曲出去的高度和宽度。(1)、如果父元素没有定位，距离浏览器最左侧的距离。(2)、如果父元素有定位，距离父元素最左侧的距离。
js中offset、client、scroll的区别
baozouqianxun的博客
10-20 191
js中offset、client、scroll的区别 1.offset：偏移量 offsetLeft：元素的左外边框至最近的被定位的父元素之间的像素距离。 offsetTop：元素的上外边框至最近的被定位的父元素之间的像素距离。 offsetWidth: 元素的宽，包含填充，边框，滚动条的宽度。 offsetHeight: 元素的高，包含填充，边框，滚动条的高度。 example: <html lang="en"> <head> <meta charset="UTF-
js - 原生js中offset和client以及scroll之间的区别
qq_43886365的博客
11-23 489
原生js中offset和client以及scroll之间的区别
client、offset和scroll的区别和用法
qiyuancoder的博客
10-30 1518
今天在项目中需要获取一个弹出框的实际内容高度，这个没什么问题，用scrollHeight，但是我想到了有两个类似的宽高属性client和scroll，由于用得少，似乎有点淡忘了，在此总结如下： 1、client client系列有4个属性： clientWidth： 元素没被设置宽度，clientWidth = 元素实际宽度 + padding左右内间距 元素被设置宽度，clientWidth = 元素被设置的宽度 + padding左右内间距 clientHeight： 同上，宽度改为高度，padding
offset,client,scroll的不同之处
董无敌啊
03-17 878
offset,client,scroll的区别
JS中常用坐标offset、scroll、client的区别
Y杨威的博客
08-25 535
右键菜单 oncontextmenu        diaplay 显示 block  隐藏 none 1.在IE中： scrollWidth:获取对象的滚动宽度 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之
三大家族scroll、offset、client的区别
zuo_zuo_blog的博客
01-13 168
1.scroll、offset、client宽高的区别 2.scroll、offset、client上下的区别 3.client介绍
Javascript中 scroll 、client、offset区别
热门推荐
qq_41853417的博客
10-14 1万+
高宽 scrollHeight 得到的时实际的高宽，不含边框返回数值不带单位 clientHeight 得到的是盒子高宽 不包含边框大小 offsetHeight 得到的是盒子高宽 包含边框大小 他们三个返回数据都不带单位 scroll 事件 scrollTop 当我们滚动条滚动时 触发此事件 例： <style> div { width: 200px; height: 200px; background
offset client scroll
03-16
offset client scroll是指客户端滚动的偏移量。在网页中，当用户滚动页面时，页面会发生滚动，此时可以通过JavaScript获取页面滚动的偏移量，即offset client scroll。这个偏移量可以用来实现一些特殊的效果，比如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值