如何使用纯JAvaScript制作div大小调整器

我正在尝试创建一个div大小调整器，由于一些限制，我不能使用jQuery，因此我不得不使用纯JavaScript。在当前状态下，它可以工作，但如果将包含滑块的div没有将位置设置为绝对，它将中断。有没有办法解决这个问题？多谢各位

我是一名学习编写JavaScript/CSS/HTML代码的学生，因此我对这方面比较陌生

const BORDER\u SIZE=4；
const panel=document.getElementById（“左面板”）；
const StationaryPanel=document.getElementById（“右面板”）；
const parent=document.getElementById（“父项”）；
const label1=document.getElementById（“lb1”）；
const label2=document.getElementById（“lb2”）；
const label3=document.getElementById（“lb3”）；
让m_pos；
函数大小调整（e）{
常数dx=m_位置-e.x；
m_pos=e.x；
lb1.innerHTML=panel.offsetWidth；
lb2.innerHTML=StationaryPanel.offsetWidth；
lb3.innerHTML=parent.offsetWidth；
//lb3.innerHTML=document.body.clientWidth；
panel.style.width=（parseInt（getComputedStyle（panel），）.width）+dx）+px；
StationaryPanel.style.width=（parent.offsetWidth-panel.offsetWidth）+“px”；
//StationaryPanel.style.width=（document.body.clientWidth-panel.offsetWidth）+“px”；
}
panel.addEventListener（“鼠标向下”，函数（e）{
如果（e.offsetX<边框大小）{
m_pos=e.x；
if（panel.style.widthpanel.maxWidth）{
返回；
}
document.addEventListener（“mousemove”，resize，false）；
}
}，假）；
document.addEventListener（“mouseup”，function（））{
document.removeEventListener（“mousemove”，resize，false）；
}，假）
#左面板{
位置：绝对位置；
宽度：96px；
最小宽度：50px；
最大宽度：500px；
左侧填充：4px；
身高：100%；
右：0；
背景色：#f0ff；
}
#左面板：：前{
内容：“；
背景色：#ccc；
位置：绝对位置；
左：0；
宽度：4px；
身高：100%；
光标：w-调整大小；
}
#右面板{
宽度：1000px；
身高：100%；
背景色：#ff0000；
}
#母公司{
宽度：800px；
}

这是左div，移动的那个
这是正确的div，保持不变的div

这是左侧面板的宽度^


这是右面板宽度^


这是父宽度^

这里是使用
CSS实现此功能的最简单方法。如果这不是问题，无需使用JS实现此功能，这只是一个示例，但肯定会对您有所帮助


#MainDiv{
显示器：flex；
弯曲方向：行；
高度：200px；
宽度：400px；
边框：1px纯红；
位置：相对位置；
}
#左撇子{
宽度：200px；
边框：1px纯黄色；
}
#右舵{
边框：2倍实心；
填充：20px；
宽度：300px；
/*您可以将此设置为垂直/自动，以双向调整大小*/
调整大小：水平；
溢出：自动；
}

左Div
右分区
所以您需要在侧边进行调整大小？是的。我需要左面板是一个主要的调整大小，然后有一个对第二个右面板的影响。谢谢你的回答。我不采用这种方法有两个原因。我计划实现此功能的网站不支持此功能（不知道为什么），我需要一个沿div块全高度运行的条，而不仅仅是在拐角处。明白了！我又添加了一个代码片段检查，可能对您有用。谢谢。这仍然使用jquery。你能指出我的代码有什么问题吗？为什么从绝对位置更改位置只会破坏它？这是
绝对
的属性，请告诉我为什么使用
绝对
不是您的选择？我很高兴我能给您我的2美分想法，是的，您总是将
相对
放在家长的位置，并使孩子
绝对
，我想看看你的代码来解决这个问题！很高兴它起作用了。我将保留这段代码，以便有人可以查看javascript和css的resizer:P如果您认为值得投票，请投票！。