未定义文本浮动div的CSS偏移量

Question

给定：

const display = document.querySelector('.display');
document.addEventListener("click", (event) => {
if (!event.target.closest("button")) return;

if(event.target.id === "button") {
if(event.target.textContent === "left"){
display.style.transform += "translateX(50px)";
} else if (event.target.textContent === "right"){
display.style.transform += "translateX(-50px)";
}
console.log("left :" + display.style.offsetLeft + ", right : " + display.style.offsetRight);
console.log("left :" + display.parentNode.style.offsetLeft + ", right : " + display.parentNode.style.offsetRight);
}

});

.meta-div {
box-shadow: 0 0 25px  rgba(0, 0, 0, 0.4);
position: relative;
border-radius: 0.5em;
overflow: hidden; /* allows the border-radius to be visible. */
width: 14rem;
}
.outer-div {
color: black;
text-overflow: normal;
white-space: nowrap;
overflow: hidden;
text-align: right;
border-left: 30px solid black;
border-right: 30px solid black;
}
.display {
float:right;
padding-right: 5px;
transition: transform 250ms;
}

<div class="meta-div">
<div class="outer-div">
<div class="display">111 + 222 + 333 + 444 + 555 + 666 + 777 + 888 + 999</div>
</div>
</div>
<button id="button">left</button>
<button id="button">right</button>

我的目标是找到一种方法来提取显示器相对于其容器的文本位置(我将其设置为relative以使offsetLeft工作(，使得当文本达到相应的左或右最大位置时，左/右按钮不工作。基本上，我希望文本最低限度地从"；111+"或最大限度地结束于"…+"999"；。

换句话说，我想从左到右为display.style.transform += "translateX(50px)";函数调用设置一个限制。

---

在线查看解决方案似乎是使用offset。在我的例子中，display文本元素及其父容器在两个方向上的偏移量似乎都是undefined。这可能是因为float:right属性吗？我对如何实现这个小功能缺乏想法。我怀疑我可能根本没有使用正确的函数(偏移(？

有人有什么建议或想法吗？

Answer 1

代码的主要问题是，应该使用的属性是display.offsetLeft和display.offsetTop。您当前正在使用display.style.offsetLeft.除此之外，没有名为offsetRight的属性。如果你想这样做，你必须自己计算。

因此，您的代码可以这样重写：

const display = document.querySelector('.display');
document.addEventListener("click", (event) => {
if (!event.target.closest("button")) return;

if(event.target.id === "button") {
if(event.target.textContent === "left"){
display.style.transform += "translateX(50px)";
} else if (event.target.textContent === "right"){
display.style.transform += "translateX(-50px)";
}
console.log("left :" + display.offsetLeft);

}

});

除此之外，您还可以使用getBoundingClientRect((函数，然后计算父元素和子元素之间的偏移量差。但既然我不知道这个用例，我可能会错的。getBoundingClientRect可以按如下方式使用：

const display = document.querySelector('.display');
const container = document.querySelector('.outer-div');

document.addEventListener("click", (event) => {
if (!event.target.closest("button")) return;


const eleRect = container.getBoundingClientRect();
const targetRect = display.getBoundingClientRect();

if(event.target.id === "button") {
if(event.target.textContent === "left"){
display.style.transform += "translateX(50px)";
} else if (event.target.textContent === "right"){
display.style.transform += "translateX(-50px)";
}

// Calculate the top and left positions
const top = eleRect.top - targetRect.top;
const left = eleRect.left - targetRect.left;

console.log("left :" + left); 
}

});