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

Posted 2023-03-06

【中文标题】未定义文本浮动 div 的 CSS 偏移量

【英文标题】：CSS offset undefined for a text floating div

【发布时间】：2021-09-27 08:54:07

【问题描述】：

给定：

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 属性吗？我对如何实现这个小功能缺乏想法。我怀疑我什至可能根本没有使用正确的功能（偏移量）？

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

【参考方案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); 

  
    
);