頂部和左側坐標在 getBoundingClientRect() 上不起作用 - Javascript

Question

我有一個菜單，我想要一個突出顯示欄在導航上的菜單項之間進行轉換（因此，當您在每個菜單項上進行 hover 時，突出顯示平滑地從一個菜單項轉到另一個菜單項）。

我可以得到它，因此“突出顯示”會更改高度和寬度以匹配.nav-link導航項，但我似乎無法使用 transform 屬性來使用 X 和 Y 定位坐標。

任何幫助都是極好的。

艾米麗

代碼筆： https://codepen.io/emilychews/pen/QWjOxKz

 // SELECT NAV-LINKS AND CREATE A SPAN var navLinks = document.querySelectorAll(".nav-link"), theHighlight = document.createElement("span"); // ADD CLASS TO SPAN AND APPEND TO BODY theHighlight.classList.add("highlight"); document.body.append(theHighlight); // MOVE THE HIGHLIGHT TO THE NAV LINKS X/Y COORDINATES AND MATCH WIDTH AND HEIGHT function moveHighlight() { var linkCoords = this.getBoundingClientRect(); var coords = { width: linkCoords.width, height: linkCoords.height, top: linkCoords.top + window.scrollY, left: linkCoords.left + window.scrollX }; theHighlight.style.width = `${coords.width}px`; theHighlight.style.height = `${coords.height}px`; theHighlight.style.transform = `translate(${coords.left}px, translate(${coords.top}px)`; } // CALL moveHighlight() FUNCTION ON MOUSEENTER navLinks.forEach(a => a.addEventListener('mouseenter', moveHighlight))

 .menu-items { display: flex; list-style: none; }.nav-link { margin-left: 2rem; display: inline-block; position: relative; } /* ADDED WITH JAVASCRIPT */.highlight { top: 0; left: 0; background: red; transition: all 0.2s; display: block; position: absolute; }

 <body> <header> <nav class="n"> <ul class="menu-items"> <li><a class="nav-link" href="#">HOME</a></li> <li><a class="nav-link" href="#">WORK</a></li> <li><a class="nav-link" href="#">PROCESS</a></li> <li><a class="nav-link" href="#">CONTACT</a></li> </ul> </nav> </header> </body>

Answer 1

您的轉換字符串translate(${coords.left}px, translate(${coords.top}px)不是有效的 css transform值。

當用實際值替換變量時，生成的字符串將類似於： translate(80px, translate(16px) 。

相反，您需要類似： translate(80px, 16px) ，這意味着您的代碼需要：

theHighlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;

頂部和左側坐標在 getBoundingClientRect() 上不起作用 - Javascript

問題描述

1 個解決方案

解決方案1
1 已采納 2020-05-04 01:17:04

頂部和左側坐標在 getBoundingClientRect() 上不起作用 - Javascript

問題描述

1 個解決方案

解決方案1 1 已采納 2020-05-04 01:17:04

解決方案1
1 已采納 2020-05-04 01:17:04