getBoundingClientRect在计算td宽度时似乎不准确 - 腾讯云开发者社区

文章/答案/技术大牛

发布

动手练一练，手写一个价格对比、固定表头滚动的表格

在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素。...scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。...getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。...3、编写滚动的相关逻辑每次我们滚动时，就会执行我们定义的 scrollHandler 函数，我们这个函数只会在窗口宽度大于 780px 才会执行固定表头的逻辑，小屏设备则没有相关效果。...table thead { position: absolute; left: 0; } 六、编写窗口大小发生变化的相关逻辑由于窗口大小并非固定，我们会经常会拖动或调整窗口的大小，因此相关元素的宽度和视口高度都要重新计算

3.2K3 1

一文彻底搞懂js中的位置计算

足以应对工作中关于元素位置计算的大部分场景。注意在使用位置计算api时要格外的小心，不合理的使用他们可能会造成布局抖动Layout Thrashing影响页面渲染。...如果存在了滚动条，client只会计算出当前元素展示出来的高度/宽度，而scroll不仅仅会计算当前元素展示出的，还会包含当前元素的滚动条隐藏内容的高度/宽度。...所谓的布局宽度也就是相对于我们上边说到的clientHeight/Width,offsetHeight/Width,他们都是不包含border以及滚动条的宽/高(如果存在的话)。...-- MDN 讲讲人话，当前元素的祖先组件节点如果不存在任何 table,td,th 以及 position 属性为 relative,absolute 等为定位元素时,offsetLeft/offsetTop...我们来看看这张图: 计算元素距离 body 的偏移量当我们需要获得元素距离 body 的距离时，但是又无法确定父元素是否存在定位元素时(大多数时候在组件开发中，并不清楚父节点是否存在定位)。

3.9K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

抛开插件，你真的懂拖动怎么实现吗？

function mouseDownHandler(e) { // 记录拖动元素 draggingElement = e.target; // 计算鼠标在拖动元素上的位置信息...这里用上了 getBoundingClientRect[7] API，其作用是为了优化前面在 mouseMoveHandler 函数中，需要不断去记录鼠标上一个位置的繁琐过程。...大概二者的区别如下： 1️⃣ 拖动元素的位置 = 拖动元素原本位置 + 拖动距离 2️⃣ 拖动元素的位置 = 根据鼠标最新位置直接计算拖动元素的最新位置 = 鼠标最新位置 - 鼠标在拖动元素上的距离鼠标在拖动元素上的距离...，拖动结束时，再将占位元素给删除，将位置让给拖动元素。...一样的，不写了 }; function isAbove(nodeA, nodeB) { const rectA = nodeA.getBoundingClientRect();

731 0

手把手带你上手D3.js数据可视化系列（二）手把手带你上手D3.js数据可视化系列（二）

* 整体宽度 = (rectWidth + totalMargin) * (1.5 * rectWidth + totalMargin)，原始面积公式应该如下，而源码里似乎采用了近似后的计算公式，古柳猜测可能是基于简化计算的原因...而且后面实际绘制矩形时，就会发现确实是矩形实际高度为实际宽度的1.5倍，而不是整体高度为整体宽度的1.5倍，所以可知这里是近似后，应该就是为了简化计算。...上面说初步计算出矩形实际宽度 rectWidth，是因为这里还通过下面的方式，在比较 rows 和 rest 孰大孰小后，算出最终 rectWidth。...不过这里暂时不尝试了，先以介绍大西洋手抄本里的源码为主。...诚然在古柳自己也没完全理解的情况下，就这么写出来似乎并不好，但还是那句话，本系列都是按照古柳自己想写的逻辑来写的，接着上篇文章的顺序，就觉得一切并不突兀、比较顺理成章，那就写写吧，等下一篇会回到基础的

3.1K1 0

Resize Observer 介绍及原理浅析

子元素 child 的宽度来决定，即一开始时为 500px；如果 .father 的宽度为 500px （大于 450px ），那么按照最后一个选择器的写法，子元素宽度应该变为 400px；但当子元素宽度为...调用 getBoundingClientRect 等函数时，浏览器为了保证我们拿到的元素参数是准确的，会触发一次 reflow 来重新布局。...举个例子，我们想实现在屏幕宽度小于 1080px 时将三列布局改为两列布局，我们并不希望每次 window 大小变化时通知我们，而只希望屏幕在大于或小于某个特定的大小时通知我们即可。...实例调用 getComputedStyle 时就有可能导致浏览器 reflow 但此时为了获取准确的元素信息， reflow 是无法避免的；因为不涉及到绘制paint，所以开销还是可接受的无限循环...结合上图，我们假设这样的场景，在监听到「节点1」宽度变化时，设置「子孙节点2」的宽度；而在「节点2」宽度改变时，我们对「节点1」的宽度进行改变，此时可能又会触发「节点1」的监听回调

3.6K4 0

整理获取 viewport 和 element 尺寸和位置方法

document.body.scrollTop window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft 窗口在显示器的位置...使用方法 getBoundingClientRect() 返回的值见下图： ?...IE 只返回 top right bottom left 四个值，如果需要 width height 则需要计算： function getBoundingClientRect(elem) {...如果是 document.body，并且是在混杂模式下，那么返回的是不包含滚动条的视口尺寸 clientLeft/clientTop 返回的是计算后的 CSS 样式的 border-left-width...如果元素是 document.body，并且是在混杂模式下，那么返回的是视口滚动区域宽度和视口宽度中较大的那个 scrollLeft/scrollTop 这个方法返回元素滚动条的位置如果元素是根元素

1.3K2 0

蜕变之始，useEffect 最后一种用法

Figma 1 如何运用 useEffect 第二个参数为一个数组，当我们传入的参数为一个空数组时，表示 effect 仅会在组件首次渲染完成时执行。...对于原生 DOM 而言，我们可以使用 getBoundingClientRect 来获取元素对象在可视区域中的位置信息本案例中的判断规则非常简单粗暴，因此当同屏出现两个目标元素时会存在规则冲突，实践中的规则设计会更细致一些...td.title} desc={td.desc}> ) } 4 总结大量的初级框架开发者被困在「试图让框架解决所有问题」的思想牢笼里，认为学会了框架似乎就完事了...第二个问题，我们期望封装一个图片组件，该组件需要支持懒加载的优化特性：只有当图片内容进入到可视区域时，图片才开始加载，这样的图片组件应该如何封装？

1501 0

可视化大屏的几种屏幕适配方案，总有一种是你需要的

假设我们正在开发一个可视化拖拽的搭建平台，可以拖拽生成工作台或可视化大屏，或者直接就是开发一个大屏，首先必须要考虑的一个问题就是页面如何适应屏幕，因为我们在搭建或开发时一般都会基于一个固定的宽高，但是实际的屏幕可能大小不一...= windowWidth; // 计算当前宽度和原始宽度的比例 ratioWidth.value = windowWidth / originCanvasWidth.value; 然后再把这个比例传给...实现也很简单，计算一下画布原始比例，再计算一下屏幕的比例，然后再判断是宽度和屏幕一致，高度自适应，还是高度和屏幕一致，宽度自适应： // 当前窗口宽高比例 let windowWidth = window.innerWidth...，那么比例为0.5，要保持比例为0.5适应屏幕，需要高度和屏幕一致，宽度自适应：计算完了画布适应屏幕后的新宽高，接下来就可以计算它相对于画布原始宽高的缩放比例： // ... // 相对于画布原始宽高的缩放比例...这个方案似乎很完美，那么还有没有问题呢，显然是有的，一个小问题是缩放后文字可能会模糊，这个问题不大，笔者遇到的另一个问题是如果使用了getBoundingClientRect方法获取元素信息，本意是获取元素原始的尺寸数据

3.2K4 1

面试官问：如何判断一个元素是否在可视区域？

面试官问：如何判断一个元素是否在可视区域？最近在参加面试找工作，陆陆续续的面了两三家。其中一个面试官问到了一个问题：如何判断一个元素是否在可视区域？...所以 clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在) 来计算。同理还有 Element.clientHeight 属性。...HTMLElement.offsetParent HTMLElement.offsetParent返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body...Element.getBoundingClientRect().top 表示元素上边距离页面上边的距离 Element.getBoundingClientRect().right表示元素右边距离页面左边的距离...如果一个元素在视窗之内的话，那么它一定满足下面四个条件： top 大于等于 0 left 大于等于 0 bottom 小于等于视窗高度 right 小于等于视窗宽度 function isContain

3.2K2 2

HTML DOM的各种宽高、偏移位置的属性总结

3.clientTop、clientLeft（只读）获取上边框、左边框的宽度（border的宽度） 4.Element.scrollWidth/scrollHeight（只读）元素内容宽度的一种度量...相关拓展 HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。...6.HTMLElement.getBoundingClientRect() 文档链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect...Event事件对象 1.clientX和clientY 这对属性是当事件发生时，鼠标点击位置相对于浏览器（可视区）的坐标，即浏览器左上角坐标的（0,0），该属性以浏览器左上角坐标为原点，计算鼠标点击位置距离其左上角的位置...3.offsetX和offsetY 这一对属性是指当事件发生时，鼠标点击位置相对于该事件源的位置，即点击该div，以该div左上角为原点来计算鼠标点击位置的坐标，如下所示：可以看到，点击该div的靠近左上角处

1.6K3 0

答题卡生成与打印

(odiv.getBoundingClientRect().top); 注意一定要添加父元素的Border的宽度(clientLeft)。...clientLeft/clientTop: 就是边框的宽度,如果不指定一个边框,值就是0. clientWidth 属性表示元素的内部宽度，以像素计。...border width 注意: 如果当前元素是行内元素(inline)时, clientLeft将返回 0; 计算滚动条宽度 // 默认情况下(没有滚动条情况下) clientWidth = content...: scrollbarWidth = (content width + paddingLeftWidth + paddingRightWidth) - clientWidth; offset 计算时都包括此对象的...与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.2K2 0

useLayoutEffect的秘密

children.map(child => child.getBoundingClientRect().width) }, [ref]); return ... } 既然，父容器的宽度和所有子元素的宽度都已经计算出来了...我们也需要考虑它的宽度。同样，我们只能在浏览器中渲染它时才能获取其宽度。...// 计算子元素的宽度，考虑了左侧位置和右侧间隙 const rect = node.getBoundingClientRect(); const width = rect.width...但是呢，在在 CPU 计算能力下降时,出产生内容闪动的情况。也就是，在某个时刻，我们先看到所有的项目和更多按钮，随后，根据可用空间的多少，会隐藏掉部分项目。 3....问题在于：在我们生成初始 HTML 时，还没有浏览器。

2921 0

pc 和 ipad 端网站适配

var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td...,q:after { content:''; content:none; } table { border-collapse:collapse; border-spacing:0; } th,td...有一个浮动导航占位符，跟实际浮动导航一样的高度，浮动导航占位符的宽度 width 可以无限大，一般设置为 99999px,足够大，他的父级元素超出隐藏就好了，当实际浮动导航的浮动时，浮动占位符占住原先的位置...window.rem = docEls.getBoundingClientRect().width/25; docEls.style.fontSize = window.rem + 'px'; }...chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。

2.9K3 0

JavaScript与jQuery获取元素的宽、高和位置

举例： console.log(div.getBoundingClientRect()); 控制台打印结果： ?...浏览器相关宽高 $(window).height() ：获取浏览器可视窗口的高度； $(document).height() ：获取整个网页文档的高度；当网页高度不足浏览器窗口时，返回的是 $(window...即：当网页滚动条拉到最低端时： $(document).height() == $(window).height() + $(window).scrollTop() 注意：不建议使用 $("html")...) 这样的方法获取高度，原因有： $("body").height() ：body可能会有边框，获取的高度会比 $(document).height() 小； $("html").height() ：在不同的浏览器上获取的高度会有差异...，浏览器不兼容。

3.1K0 0

前端项目遇到的问题（一）

闲言时隔2年重新写写文章，23年6月在公司躲过了2次人员优化的我，在第三次主动领取大礼包。...、getClientRects在 JavaScript 中，getComputedStyle、getBoundingClientRect 和 getClientRects 是用于获取元素宽高及位置信息的方法...，以下是对它们的介绍：1.getComputedStyle()：这个方法可以获取指定元素的最终计算后的 CSS 样式。...可以通过该方法获取元素的宽度和高度属性，如 width 和 height。适用场景：当需要获取元素的具体 CSS 样式属性值时很有用，不仅限于宽高，还可以获取颜色、字体大小等各种样式属性。...2.getBoundingClientRect()：返回一个 DOMRect 对象，包含元素的位置和大小信息。可以直接获取元素的宽度和高度，以及相对于视口的位置信息。

1001 0

BOOtstrap源码分析之 tooltip、popover

方法，但此方法在IE8-会插件width、height 5.2、如果是body，width、height会被重置为window的 5.3、源码如下： $element = $element...left为定位元素(pos)的Left – 定位元素(pos)的宽度/2 – tooltip元素宽度/2 6.2、top时 6.2.1、top为定位元素(pos) 的top-tooltip元素的高度... 6.2.2、left为定位元素(pos)的left – 定位元素(pos)的宽度/2 – tooltip元素宽度/2 6.3、left时 6.3.1、top为定位元素(pos)的top...– 定位元素(pos)的高度/2 – tooltip元素高度/2 6.3.2、left为定位元素(pos)的left – tooltip元素的宽度 6.4、right时 6.4.1...方法名为：getViewportAdjustedDelta 6.5.1、首先计算出被overflow的宽度、或者高度 6.5.2、然后计算出arrowDelta的值，隐藏值 * 2

2K6 0

vue项目移动端、pc端适配方案

postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，1rem=html标签的font-size值。...在node-modules依赖包lib-flexible文件夹中的flexible.js文件，可以看到源码 function refreshRem(){ //获取屏幕宽度...var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { //这里当屏幕宽度大于...假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。那为什么你在这里写成了37.5呢？？？那我们后面专门来讲！...五、注意事项 1、字号不使用rem 我们都知道chrome的最小显示的字体是12px，如果字体用rem，计算出来小于12px，那么就也会以12px显示，而且我们不希望出现13px或者15px这样的奇葩尺寸

3.8K3 0

getBoundingClientRect使用指南

属性值： top: 元素上边距离页面上边的距离 left: 元素右边距离页面左边的距离 right: 元素右边距离页面左边的距离 bottom: 元素下边距离页面上边的距离 width: 元素宽度 height...当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。...如图所示：当页面的元素在浏览器的左上角时，得到的top和left值为负值，right和bottom值为正值。...; var positionY = this.getBoundingClientRect().top + document.documentElement.scrollLeft; 应用场景二 2、判断元素是否在可视区域内...true; } else if (top >= se || bottom <= 0) { // 不可见 } return false; } 缺点这个属性频繁计算会引发页面的重绘

1.5K4 0

javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

，内容不超出盒子高度时为盒子的clientWidth * scrollHeight 元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight * ****...** 元素视图属性结束 * ****** Window视图属性（低版本IE浏览器[不包含？？？】...* innerWidth 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏） * innerHeight 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏） * *...document.documentElement.scrollLeft 返回文档的滚动left方向的距离（当窗口发生滚动时值改变） ****** Document文档视图结束 * ****** 元素方法 * 1. getBoundingClientRect...，对整体影响也不明显，但如果有道友有准确答案的，还请不吝赐教，顺手留个言，谢谢！

9392 0

JavaScript实现背景图像切换3D动画效果

一、项目需求给一张长图，长图中有好多个图像，图像的动作是连续的，当鼠标在容器内移动时，背景图像会随之切换，呈现出连续的动画效果，实现效果类似于3D动画，用JS怎么实现？以下是实现效果。...Math.min(Math.max(index, 0), imageCount - 1)将计算出来的索引值限制在 0 到 imageCount - 1 的范围，防止出现索引越界。...如果计算出所以为imageCount，那么最终计算出的索引是imageCount-1mousemovemousemove 事件监听器，鼠标在某元素上移动时触发，在事件处理函数中实现了图像切换的逻辑。...在事件处理函数中，首先获取了容器元素相对于视口的位置(containerRect.left;)和鼠标移动处到浏览器窗口的横距离(clientX)来计算鼠标偏移量。...这个值的计算方法是将单个图像的宽度（462.99px）乘以图像的数量（15）得到的。

2391 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

动手练一练，手写一个价格对比、固定表头滚动的表格

一文彻底搞懂js中的位置计算

抛开插件，你真的懂拖动怎么实现吗？

手把手带你上手D3.js数据可视化系列（二）手把手带你上手D3.js数据可视化系列（二）

Resize Observer 介绍及原理浅析

整理获取 viewport 和 element 尺寸和位置方法

蜕变之始，useEffect 最后一种用法

可视化大屏的几种屏幕适配方案，总有一种是你需要的

面试官问：如何判断一个元素是否在可视区域？

HTML DOM的各种宽高、偏移位置的属性总结

答题卡生成与打印

useLayoutEffect的秘密

pc 和 ipad 端网站适配

JavaScript与jQuery获取元素的宽、高和位置

前端项目遇到的问题（一）

BOOtstrap源码分析之 tooltip、popover

vue项目移动端、pc端适配方案

getBoundingClientRect使用指南

javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

JavaScript实现背景图像切换3D动画效果

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐