offsetLeft与style.left的区别


offsetLeft 获取的是相对于父对象的左边距

left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距

如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,
这同offsetLeft是相同的,区别在于:
1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,
还用offsetLeft比较方便。
2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。
3. style.left的值需要事先定义,否则取到的值为空。而且必须要定义在html里,我做过试验,如果定义在
css里,style.left的值仍然 为空,这就是我刚开始碰到的问题,总是取不到style.left的值。

offsetLeft则仍然能够取到,无需事先定义div的位置。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
请根据代码片段仿写实现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
以下是仿写的代码实现: ```html <template> <div class="dialog-wrapper" v-dialog-zoom-out> <div class="el-dialog"> <div class="el-dialog__header">Dialog Title</div> <div class="el-dialog__body">Dialog Content</div> <div class="el-dialog__footer"> <button @click="$emit('close')">Close</button> </div> <div class="el-dialog__resize"></div> </div> </div> </template> <script> export default { name: "Dialog", }; </script> <style> .dialog-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .el-dialog { position: absolute; top: 0; left: 0; overflow: auto; max-height: 80vh; background-color: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .el-dialog__header { padding: 16px; background-color: #f5f7fa; border-top-left-radius: 4px; border-top-right-radius: 4px; cursor: move; } .el-dialog__body { padding: 16px; } .el-dialog__footer { display: flex; justify-content: flex-end; padding: 16px; background-color: #f5f7fa; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .el-dialog__footer button { padding: 8px 16px; background-color: #fff; border: 1px solid #c1c1c1; border-radius: 4px; cursor: pointer; } .el-dialog__resize { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; cursor: se-resize; background-color: #c1c1c1; } </style> ``` ```javascript 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; }; }; }, }); ``` 上述代码实现了一个类似于Element UI中的Dialog组件的拖拽和缩放功能。在使用时,只需要将 `v-dialog-zoom-out` 指令绑定到Dialog组件的容器元素上,即可实现拖拽和缩放功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值