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

Question

我想使用 HTML/CSS/JS 来创建 <div>仅在一定宽度内更改其颜色。该特定长度取决于在 <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获取