如何获取鼠标点击div的宽度？

Question

我想使用 HTML/CSS/JS 将<div>其颜色更改为仅达到一定的宽度。该特定长度取决于在 .txt 文件中单击的位置<div>。

例子：

我会给出代码，但它只是一个<div>.
我不知道如何使用 CSS/JS 来检测鼠标点击的位置<div>（即宽度大小）。

Answer 1

你可以这样实现

function changeWidth(event) {
  let outerDiv = document.getElementById('outerDiv');
  document.getElementById('innerDiv').style.width = event.clientX-outerDiv.offsetLeft+'px';
}

#outerDiv {
  width: 400px;
  height:200px;
  border: 1px solid black;
}
#innerDiv {
  width: 0px;
  height: 200px;
  background-color: red;
}

<div id = 'outerDiv' onclick = 'changeWidth(event)'>
  <div id = 'innerDiv' ></div>
</div>

您必须检查外箱的位置，您可以使用以下方法获取外箱的位置：el.offSetLeft

Answer 2

background-image用于创建颜色的简单方法。

document.querySelector(".box").addEventListener("click", function(e){
  var position = e.clientX - this.getBoundingClientRect().left;
  this.style.backgroundImage = "linear-gradient(90deg, red " + position + "px, transparent " + position + "px)";
});

.box {
  border: 2px solid #c3c3c3;
  height: 200px;
  width: 400px;
}

<div class="box"></div>

e.clientX是相对于窗口的位置。因此，您可以使用 div 的左侧位置.getBoundingClientRect().left并减去它来获得准确的点击位置。

如果您需要它适用于多个 div：

1）为每个添加内联onclick<div>

function colourBackground (e, div) {
  var position = e.clientX - div.getBoundingClientRect().left;
  div.style.backgroundImage = "linear-gradient(90deg, red " + position + "px, transparent " + position + "px)";
};

.box {
  border: 2px solid #c3c3c3;
  height: 200px;
  width: 400px;
}

<div class="box" onclick="colourBackground(event, this)"></div>
<div class="box" onclick="colourBackground(event, this)"></div>
<div class="box" onclick="colourBackground(event, this)"></div>

或者2)使用 forEach 循环为每个循环添加一个点击事件<div>

document.querySelectorAll(".box").forEach(function(div) {
  div.addEventListener("click", function(e){
    var position = e.clientX - div.getBoundingClientRect().left;
    div.style.backgroundImage = "linear-gradient(90deg, red " + position + "px, transparent " + position + "px)";
  });
})

.box {
  border: 2px solid #c3c3c3;
  height: 200px;
  width: 400px;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>