offsetLeft和style.left的区别

最新推荐文章于 2022-02-19 21:42:49 发布
最新推荐文章于 2022-02-19 21:42:49 发布
阅读量141 收藏
点赞数
分类专栏： 学习
原文链接：https://blog.csdn.net/gofanderson/article/details/80088940
版权

1.offsetLeft获取的是当前元素距流中父元素左侧的值，包括父元素的padding-left、margin-left、border-left
2.如果当前元素已从普通流中删除，使用了绝对定位absolute或固定定位fixed，offsetLeft获取的是当前元素距已定位的父元素左侧的值，即left当前元素的margin-left。
3.style.left返回值为字符串，如”21px”，offsetLeft返回值为数值，如28；

嘻嘻哈哈xh
关注
专栏目录
div的offsetLeft与style.left区别
10-21
在处理位置信息时，开发者经常会使用到offsetLeft和style.left这两个属性。尽管它们都与元素的位置有关，但是它们之间存在一些显著的区别。本文将详细介绍div元素的offsetLeft属性和style.left属性之间的差异，并...
javascript中style.left和offsetLeft的用法说明
12-11
如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的，区别在于： 1. style.left 返回的是字符串，如28px，offsetLeft返回的是...
style.left,offsetLeft相对于容器的位置控制
cheng - cheer up。。。 。。。
11-13 599
如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值， 这同offsetLeft是相同的，区别在于： 1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算， 还用offsetLeft比较方便。 2. style.l...
offsetLeft 和 style.left
weixin_30335353的博客
08-14 148
属性和css参数 1、style.left 需要设置后才能获取，不然为空，所以js 刚写的时候去获取 元素左边距用offsetLeft 。 2、style.left 可以设置元素左边距（读写），offsetLeft 只能读取（读）。 3、style.left 读出数据 20px，含单位，offsetLeft读出20，没有单位，方便用于计算。 offsetWidth /clientW...
js中的offsetLeft和style.left
zp19860529的博客
08-05 2119
（1）style.left是带单位"px"的，而offsetLeft没有单位，另外，style.left必须是内联样式，或者在JS中通过style.left赋值，否则取得的将为空字符串（在内部样式和外部样式中指定left是无效的） （2）如果没有已经定位的父元素，那么offsetLeft指向的是文档（document）的左边缘 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
offsetLeft和style.left
随书笔记
03-28 461
作业中用到了style.left和offsetLeft，想知道这俩有什么区别，现在记录下： 别人说offsetLeft是指相对于父级元素的左边位置，style.left是指相对于有定位属性的父级元素的左边位置，别人说的没懂，干脆alert这俩东西看看弹出来什么。 实验出来offsetLeft弹出来是元素所在的位置的坐标值，不错是我想取值的东西；而style.left弹出来是空的，什么东西都没有
offsetLeft 与style.left区别
weixin_30650039的博客
08-23 219
1.定义: offsetLeft: 获取的是当前对象左侧距离父对象左侧的值(均不包含border); style.left: 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距; 还有个clientLeft:获取的是当前对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离,. 2.如果父对象的position定义为relativ...
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
09-03
关于`offsetLeft`和`style.left`的区别： 1. `offsetLeft` 属性返回元素相对于其最近的定位（position非static）父元素的左边缘的距离，以像素为单位。这是一个只读属性，无法直接设置。 2. `style.left` 属性用于...
JavaScript中style.left与offsetLeft的使用及区别详解
10-22
总结一下style.left和offsetLeft的主要区别： 1. style.left返回的是一个带有"px"后缀的字符串，而offsetLeft返回的是一个数值。 2. style.left可以读取也可以设置元素的left位置，offsetLeft只读不写。 3. style....
offsetleft和left和style.left的区别
wszylh的博客
10-11 717
left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距。 offsetLeft 获取的是相对于父对象的左边距。 如果父div的position定义为relative,子div的position定义为absolute（其中relative是相对于正常应该在的位置，absolute则是相对一第一个父块级元素），那么子div的style.left的值
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 等区别
吃螃蟹的虾子
09-24 5582
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth;
offsetLeft与style.left区别
喜东东的博客
08-03 182
offsetLeft 获取的是相对于父对象的左边距， left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距，如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的。 区别： 1. style.left 返回...
offsetLeft style.Left 的区别
mj_leona的博客
03-19 249
offsetLeft style.Left 的区别一、最大区别在于  offsetLeft  可以返回没有定位盒子的距离左侧的位置。 而 style.left不可以  只有定位的盒子 才有 left  top right   二、offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px。 style.left = 300px      parseIn...
笔记--关于offsetLeft和left的区别
qq_37160320的博客
07-30 1878
关于offsetLeft和left的区别（关于offsetLeft：https://developer.mozilla.org/zhCN/docs/Web/API/HTMLElement/offsetLeft）1.定义了position：relative或absolute属性的元素才有left属性，元素都有offsetLeft属性。 2.元素内联样式中设置了left，才能通过div.styl
offsetleft和styleleft区别？
weixin_48037671的博客
02-19 406
offsetleft和styleleft区别？ （1）最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。如果父系盒子中都没有定位，以body为准。 （2）offsetTop返回的是数字，而style.top返回的是字符串，除了数字外还带有单位：px。 （3）offsetTop只读，而style.top可读写。（只读是获取值，可写是赋值） （4）如果没有给HTML元素指定过top样式，则style.top返回的是空字符串。style.left只能获取行内式，如果没...
style.left或style.top设置位置与浏览器
DMX66的专栏
10-16 1560
 style.left或style.top设置位置
请根据代码片段仿写实现div左下角拖拽移动用具体代码实现，import Vue from 'vue' Vue.directive('dialogZoomOut', { bind(el, binding, vnode, oldVnode) { let minWidth = 400;let minHeight = 300;let isFullScreen = false; let nowWidth = 0;let nowHight = 0;let nowMarginTop = 0;const dialogHeaderEl = el.querySelector('.el-dialog__header');const dragDom = el.querySelector('.el-dialog');dragDom.style.overflow = "auto";dialogHeaderEl.onselectstart = new Function("return false");dialogHeaderEl.style.cursor = 'move';const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);let moveDown = (e) => {const disX = e.clientX - dialogHeaderEl.offsetLeft;const disY = e.clientY - dialogHeaderEl.offsetTop;let styL, styT;if (sty.left.includes('%')) {styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100);styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100);} else {styL = +sty.left.replace(/px/g, '');styT = +sty.top.replace(/px/g, '');};document.onmousemove = function (e) {const l = e.clientX - disX;const t = e.clientY - disY;dragDom.style.left = `${l + styL}px`;dragDom.style.top = `${t + styT}px`;};document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};}dialogHeaderEl.onmousedown = moveDown;dialogHeaderEl.ondblclick = (e) => {if (isFullScreen == false) {nowHight = dragDom.clientHeight;nowWidth = dragDom.clientWidth;nowMarginTop = dragDom.style.marginTop;dragDom.style.left = 0;dragDom.style.top = 0;dragDom.style.height = "100VH";dragDom.style.width = "100VW";dragDom.style.marginTop = 0;isFullScreen = true;dialogHeaderEl.style.cursor = 'initial';dialogHeaderEl.onmousedown = null;} else {dragDom.style.height = "auto";dragDom.style.width = nowWidth + 'px';dragDom.style.marginTop = nowMarginTop;isFullScreen = false;dialogHeaderEl.style.cursor = 'move';dialogHeaderEl.onmousedown = moveDown;}}let resizeEl = document.createElement("div");dragDom.appendChild(resizeEl);resizeEl.style.cursor = 'se-resize';resizeEl.style.position = 'absolute';resizeEl.style.height = '10px';resizeEl.style.width = '10px';resizeEl.style.right = '0px';resizeEl.style.bottom = '0px';resizeEl.style.zIndex = '99';resizeEl.onmousedown = (e) => {let clientX = e.clientX;let disX = e.clientX - resizeEl.offsetLeft;let disY = e.clientY - resizeEl.offsetTop;document.onmousemove = function (e) {e.preventDefault(); let x = e.clientX - disX + (e.clientX - clientX);let y = e.clientY - disY;dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px';dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px';};document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};}}})
最新发布
06-01
dragDom.style.left = `${l + styL}px`; dragDom.style.top = `${t + styT}px`; }; document.onmouseup = function (e) { document.onmousemove = null; document.onmouseup = null; }; }; dialogHeaderEl....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值