offsetTop 与 style.top 的差别

最新推荐文章于 2024-08-17 10:56:45 发布
最新推荐文章于 2024-08-17 10:56:45 发布
阅读量1.3k 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33769914/article/details/77715461
版权

offsetTop 与 style.top 的差别

我们知道 offsetTop 可以获得 HTML 元素间隔上方或外层元素的地位，style.top 也是可以的，二者的差别是：

一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

二、offsetTop 只读，而 style.top 可读写。

三、若是没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

肖肖肖丽珠
关注
专栏目录
Js中关于top、clientTop、scrollTop、offsetTop.pdf
09-27
七、style.top 与 offsetTop 的区别 style.top 属性用于获取或设置 HTML 元素的 top 属性值，返回的是字符串，包括单位。offsetTop 属性用于获取 HTML 元素相对于其父元素的上边缘的距离，返回的是数字，单位为像素...
offsetTop 与style.top之间的区别
weixin_30809333的博客
11-29 122
预备知识：offsetTop、offsetLeft、offsetWidth、offsetHeight 我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是： 一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。(这里的style.top是读的css样式中的top:20p...
offsetTop和style.top的区别
weixin_34166472的博客
04-03 120
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是： 一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。 二、offsetTop 只读，而 style.top 可读写。 三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。 of...
元素偏移（offset，scroll,client)介绍，动态设置类名，样式
最新发布
qq_48763502的博客
08-17 2254
属性 / 方法描述表示一个元素的顶部边框的宽度，以像素表示。表示一个元素的左边框的宽度，以像素表示。在页面上返回内容的可视高度（高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）在页面上返回内容的可视宽度（宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）返回任何一个元素的高度包括边框（border）和内边距（padding），但不包含外边距（margin）
html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
热门推荐
u013795673的博客
08-10 3万+
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度  offs
offsetLeft,Left,clientLeft的区别
xo_tobacoo
09-16 223
js开发富客户端必须要掌握的，本来打算自己总结下，不过baidu到这篇非常简单易懂:请参考图看   假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。 obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位...
offset().top和offsetTop
qq_43654065的博客
09-22 596
获取元素距离上方的位置。 区别： offset().top属于jquery方法 offsetTop属于js方法。 没什么区别
请根据代码片段仿写实现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.top = `${t + styT}px`; }; document.onmouseup = function (e) { document.onmousemove = null; document.onmouseup = null; }; }; dialogHeaderEl.onmousedown = moveDown; dialogHeaderEl...
// 设置弹出窗口中的图片 popupImg.src = imageSrc; popupImg.style.transform = `scale(${scale})`; // 加载完成后计算图片的宽高比例 popupImg.onload = function() { var imgWidth = popupImg.width; var imgHeight = popupImg.height; // 计算图片的缩放比例 var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 var widthScale = windowWidth / imgWidth; var heightScale = windowHeight / imgHeight; scale = Math.min(widthScale, heightScale); // 设置弹出窗口中的图片样式 popupImg.style.transform = `scale(${scale})`; popupImg.style.display = "block"; popupImg.style.margin = "auto"; // 居中弹出窗口 function centerPopup() { var popupWidth = popup.offsetWidth; var popupHeight = popup.offsetHeight; var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var offsetLeft = (windowWidth - popupWidth) / 2; var offsetTop = (windowHeight - popupHeight) / 2 + scrollTop; // 设置弹出窗口的位置 popup.style.left = offsetLeft + "px"; popup.style.top = offsetTop + "px"; } // 设置悬浮窗样式 popup.style.position = "fixed"; popup.style.top = "10%"; popup.style.left = "10%"; popup.style.width = windowWidth + "px"; popup.style.height = windowHeight + "px"; popup.style.backgroundColor = "transparent"; popup.style.zIndex = "9999";这是我的代码，经过上面设置后，当表格行数过多时任然会存在放大图片的悬浮窗未在屏幕中心，靠近页面底部，且只显示一半图片
07-14
popup.style.top = offsetTop + "px"; } // 设置悬浮窗样式 function setPopupStyle() { var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * ...
通过 document.querySelector('')获取的元素，怎么设置距离顶部的值，出来直接style.top
05-30
除了使用元素的 style.top 属性来设置元素距离顶部的值以外，还可以使用 offsetTop 属性和 scrollTop 属性来实现。 1. 使用 offsetTop 属性 offsetTop 属性返回一个元素的相对于 offsetParent 元素的顶部内边距的...
// 根据鼠标位置计算遮罩层的位置 // var left = e.clientX - midImg.offsetLeft - mask.offsetWidth / 2; // // 同理 // var top = e.clientY - midImg.offsetTop - mask.offsetHeight / 2; // // 边界条件 // if (left <= 0) { // left = 0; // } // if (top <=0 ) { // top = 0; // } // if (left >= midImg.offsetWidth - mask.offsetWidth) { // left = midImg.offsetWidth - mask.offsetWidth // } // if (top >= midImg.offsetHeight - mask.offsetHeight) { // top = midImg.offsetHeight - mask.offsetHeight // } // // 根据top和left调整mask的位置 // mask.style.left = left + 'px'; // mask.style.top = top + 'px'; // // 根据top 和 left，修改大图的位置，background-position-x // largeImg.style.backgroundPositionX = -left + 'px'; // largeImg.style.backgroundPositionY = -top + 'px'; // }
05-18
`offsetLeft` 和 `offsetTop` 是获取元素相对于父元素的偏移量，`offsetWidth` 和 `offsetHeight` 是获取元素的宽度和高度。`backgroundPositionX` 和 `backgroundPositionY` 是设置背景图片的位置。
Js中 关于top、clientTop、scrollTop、offsetTop的用法
09-28 528
Js中 关于top、clientTop、scrollTop、offsetTop的用法 网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeigh...
通过dom元素获得offsetTop和通过jquery获得offsetTop值不一致
qq_36635569的博客
04-14 1511
document.getElementById(id).offsetTop 不等于$(selecter).offset().left 后者更接近与真实值
Js之offset属性与style属性的区别
qq_34082921的博客
10-31 717
offsetWidth和.offsetHeight 返回的宽和高是包括padding 内容区 border的，但是不包括margin。所以获取的是元素的实际宽高 = width + border + padding.如果元素没有父级元素或者父级元素没有定位(祖先元素也可以)，则以body为父级。
JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）
小菜吉的博客
02-28 2万+
这里是javascript中制作滚动代码的常用属性 页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; window.innerHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高..
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
semanwmj的专栏
12-15 2万+
这里是javascript中制作滚动代码的常用属性 页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth   (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文
offsettop的用法
qq_40630924的博客
02-16 1853
offsettop的用法，作用是获取一个元素到顶部的距离，做吸顶可以用offsettop获取到顶部的距离
js中offsetHeight，offsetWidth，offsetTop,offsetLeft属性的使用
m0_56132701的博客
01-06 1991
element.offsetHeight属性返回元素的垂直高度，element.offsetWidth属性返回元素的水平宽度。element.offsetParent属性与定位有着很大的关系，它的定义是：与当前元素最近的经过定位的父级元素。如果存在水平滚动条，offsetHeight包括水平滚动条的高度。offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离。offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值