顶部和左侧坐标在 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