垂直或水平调整 div 大小答案

【问题标题】：Resize div vertical or horizontal垂直或水平调整 div 大小
【发布时间】：2017-04-14 12:00:02
【问题描述】：

如何在不使用 css 属性的情况下调整 div 的垂直或水平大小，只需使用纯 JavaScript 代码从高度或宽度调整大小？

【问题讨论】：

显示一些您尝试过的代码，或者您尝试如何实施更改。

【解决方案1】：

HTML

<div id="container">
<div id="top-panel"> This is the top side's content! </div>
<div id="bottom-panel">
  <div id="drag"></div> 
  bottom content!</div>

JAVASCRIPT

var isResizing = false,
lastDownX = 0;

$(function () {
var container = $('#container'),
    top = $('#top-panel'),
    bottom = $('#bottom-panel'),
    handle = $('#drag');


document.addEventListener("mousedown", function(e){
isResizing = true;
    lastDownX = e.clientY;
});
document.addEventListener("mousemove", function(e){

    // we don't want to do anything if we aren't resizing.
    if (!isResizing) 
        return;
    console.log("e.clientY ", e.clientY, container.offset().top)
    var offsetRight = container.height() - (e.clientY - container.offset().top);

    top.css('bottom', offsetRight);
    bottom.css('height', offsetRight);
}); document.addEventListener("mouseup", function(e){
    // stop resizing
    isResizing = false;
});

}); resize div veritcally

【讨论】：

【解决方案2】：

我发现最好的结果如下：

 var div1 = document.getElementById("DivOne");
 var dRect = div1.getBoundingClientRect();

 var scrollBarWidth = 6;
 var w = window.innerWidth - 2*dRect.left - scrollBarWidth;
 var h = window.innerHeight - 2*dRect.top - scrollBarWidth;
 div1.style.width = w.toString()  + "px";
 div1.style.height = h.toString()  + "px";

工作示例：Single DIV sized to the document window

【讨论】：

【解决方案3】：

您可以使用style 例如

getElementById('div_register').style.width='500px';
getElementById('div_register').style.height='500px';

【讨论】：

不，你不明白我，你必须使用光标从垂直或水平调整大小