相关疑难解决方法(0)

如何使用纯JavaScript使HTML元素可调整大小?

我想知道如何在使用纯JavaScript而不是jQuery库或任何其他库单击时使HTML元素<div><p>标记元素可调整大小.

html javascript css dom-events

58
推荐指数
8
解决办法
11万
查看次数

在边框拖放时调整div的大小,而不添加额外的标记

我有一个绝对定位的侧面板,我需要通过拖动这个边框来改变它的宽度.此外,我需要更改边框悬停上的光标.是否可以在不添加另一个div进行拖动的情况下执行此操作?

这是标记:

#right_panel {
    position: absolute;
    border-left: solid 3px #ccc;
    width: 100px;
    height: 100%;
    right: 0;
    background-color: #f0f0f0;
}
Run Code Online (Sandbox Code Playgroud)
<body>
    <div id="right_panel"></div>
</body>
Run Code Online (Sandbox Code Playgroud)

我不需要完整的解决方案.是(带文档参考)/没有答案就足够了.我不需要助手的回答div.我已经有一个:

var m_pos;
function resize(e){
    var parent = resize_el.parentNode;
    var dx = m_pos - e.x;
    m_pos = e.x;
    parent.style.width = (parseInt(getComputedStyle(parent, '').width) + dx) + "px";
}

var resize_el = document.getElementById("resize");
resize_el.addEventListener("mousedown", function(e){
    m_pos = e.x;
    document.addEventListener("mousemove", resize, false);
}, false);
document.addEventListener("mouseup", function(){
    document.removeEventListener("mousemove", resize, false);
}, false);
Run Code Online (Sandbox Code Playgroud)
#right_panel {
    position: absolute;
    width: 96px;
    padding-left: …
Run Code Online (Sandbox Code Playgroud)

html javascript css

18
推荐指数
4
解决办法
3万
查看次数

标签 统计

css ×2

html ×2

javascript ×2

dom-events ×1