javascript - 以百分比或小数位返回元素的 offsetWidth 以使覆盖 div 的宽度相同 - React/Javascript

Question

最近我在 React 中摆弄了一下，遇到了以下问题，这不一定与 React 相关，但通常与 Javascript/CSS 更多相关。

我创建了一个包含一定数量单元格的条形图。这些单元格都具有相同的 width 和 height 属性，但会根据 viewport 调整其宽度/高度属性。

当我点击其中一个单元格时，一个 div 被附加到单元格的容器中，这个 div 是一个具有不同颜色的叠加层(所以你知道哪个单元格被点击了)。

问题是条形图及其包含的单元格的宽度属性设置为百分比，这样做是为了在将更多单元格添加到包含的 div 时，我可以根据总单元格计数计算所需的宽度。

然而，overlay div 是在单击单元格时添加的，其宽度以 px 定义。这是因为覆盖 div 的 left 和 top 位置由 pageY 和 pageX 坐标确定，正在使用 offsetHeight 和 offsetWidth 获取单元格元素的 height 和 width。

上面的结果是单元格的实际宽度是一个十进制值(它是百分比)但是计算出的宽度是一个四舍五入的px值，这个结果如下:

正常单元格宽度:

Overlay div 宽度:

如您所见，这是宽度上的微小差异，为了正确显示它，我不得不放大很多。在第二张图片中，您看到叠加层 div 被添加到 left position 的位置越远，差异就越大(这是合乎逻辑的)。

代码:这是正在渲染的普通 Cell

_onRenderCell = (item, index) => {

this.myCell = React.createRef();

return (
  <div
    className="ms-ListGridExample-tile"
    data-is-focusable={false}
    style={{
      width: 100 / this._columnCount + '%',
      height: this._rowHeight * 1.5,
      float: 'left'
    }}
  >

  ... rest of the rendering omitted ...

你可以在这里看到宽度是根据列数确定的，并以百分比形式返回:width: 100/this._columnCount + '%'

添加覆盖 div 的 onMouseDown 事件:

_onMouseDown (e){

    const containerNode = this.rsvnRef.current;
    const cellNode = this.myCell.current;

    // Determine current position 
    let posY = e.pageY - containerNode.getBoundingClientRect().top;
    let posX = e.pageX - containerNode.getBoundingClientRect().left;

    // Determine width and height of cell
    let height = cellNode.offsetHeight;
    let width = cellNode.offsetWidth;

    // Determine top and left positions
    let top = posY - (posY % height);
    let left = posX - (posX % width);


    var reservationClasses = document.getElementsByClassName('reservation');

    var collisions = Array.prototype.filter.call(reservationClasses, function(rsv) {
        return rsv.offsetTop == top && rsv.offsetLeft == left;
    });

    if (collisions.length == 0){

        // Creating the overlay div
        const newRsvn = document.createElement("div");
        newRsvn.className = "reservation reservation-creating";
        newRsvn.style.top = top + 'px';
        newRsvn.style.left = left + 'px';
        newRsvn.style.height = height + 'px';
        newRsvn.style.width = width + 'px';

        // Apending overlay div to container
        containerNode.append(newRsvn);

    }

}

我的问题是(如您所料)；如何使覆盖的 div 具有与单元格 div 完全相同的宽度？您能否返回带小数位的 offsetWidth，或者我能否以某种方式计算 offsetWidth 的百分比？

Answer 1

经过更多研究，并感谢这篇文章:Converting width from percentage to pixels我设法完成了它。

但是，我不知道这是否是最好/正确的解决方案，所以如果您认为有更好的方法，请务必提供反馈!

我决定只设置 width pixels 中的单元格而不是 percentage .无论如何，单元格的渲染都是动态完成的(每次屏幕尺寸发生变化时)，因此计算 cell rendering 中正确的像素数量。并将其四舍五入为整数效果很好，因为现在 cell和 overlaying div使用相同的宽度。

代码:

_onRenderCell = (item, index) => {

    this.myCell = React.createRef();
    const containerNode = this.rsvnRef.current;

    let percents = parseInt(100 / this._columnCount);
    let parentWidth = parseInt(containerNode.offsetWidth);
    let pixels = parseInt(parentWidth*(percents/100));

    return (
      <div
        className="ms-ListGridExample-tile"
        data-is-focusable={false}
        style={{
          // width: 100 / this._columnCount + '%',
          width: pixels + 'px',
          height: this._rowHeight * 1.5,
          float: 'left'
        }}
      >

      ... rest of the rendering omitted ...