我想使用 HTML/CSS/JS 来创建 <div>
仅在一定宽度内更改其颜色。该特定长度取决于在 <div>
中单击的位置。 。
示例:
我会给出代码,但它只是 <div>
.
我不知道如何使用CSS/JS来检测鼠标点击的位置<div>
(即宽度尺寸是多少)。
最佳答案
你可以这样实现
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
获取
关于javascript - 如何获取鼠标点击div的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60923136/