实现div可以调整高度（div实现resize）

实现div可以调整高度（div实现resize）

一、div 实现resize（类似textarea）

　　代码如下：

<!DOCTYPE html>
<html><head><title>div实现textarea效果</title><style>#textarea{height:200px;width:300px;padding:4px;border:1px solid #888;resize:vertical;overflow:auto;}#textarea:empty:before{content:attr(placeholder);color:#bbb;}</style></head><body><divid="textarea"contenteditable="true"placeholder="请输入内容..."></div></body>
</html>

二、监听div的resize事件

<!DOCTYPE html>
<html><head><title>div监听resize事件</title><style>.container{position:relative;width:500px;height:300px;background-color:black;padding:4px;resize:vertical;overflow:auto;}.size-watch{width:100%;height:100%;position:absolute;visibility:hidden;margin:0;padding:0;border:0;}</style>    </head><body><divclass="container"id="mapDiv" >hello</div><script>functionriseze (el, cb) {//创建iframe标签，设置样式并插入到被监听元素中variframe=document.createElement('iframe');iframe.setAttribute('class','size-watch');el.appendChild(iframe);//记录元素当前宽高varoldWidth=el.offsetWidth;varoldHeight=el.offsetHeight;//iframe 大小变化时的回调函数functionsizeChange () {//记录元素变化后的宽高varwidth=el.offsetWidth;varheight=el.offsetHeight;//不一致时触发回调函数 cb，并更新元素当前宽高if(width!==oldWidth||height!==oldHeight) {cb({width: width, height: height}, {width: oldWidth, height: oldHeight});oldWidth=width;oldHeight=height;}}//设置定时器用于节流vartimer= 0;//将 sizeChange 函数挂载到 iframe 的resize回调中
iframe.contentWindow.onresize= function() {clearTimeout(timer);timer=setTimeout(sizeChange,20);};}//var el = document.getElementById("mapDiv");varel=document.querySelector('.container');riseze(el, (val, oldVal)=>{console.log(`size changed！new: ${JSON.stringify(val)}, old: ${JSON.stringify(oldVal)}`);});</script></body>
</html>

参考网站：

1、https://blog.csdn.net/liya_nan/article/details/81742370

2、https://segmentfault.com/a/1190000016550156

转载于:https://www.cnblogs.com/BillyYoung/p/11209041.html

实现div可以调整高度（div实现resize）相关推荐

获取div的各种高度
1.获取div的文档总高度(必须DOM操作): var scrollHeight=document.getElementById("inner").scrollHeight;// ...
CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度
原文:CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度如图: 1.自动换行 <div style="widht:100%;height:100%;wo ...
div没有设置高度，背景颜色却无法显示
在设计网页时,设置了div为自动高度或不给height值,当div设置背景时在IE6可以显示背景颜色,但是IE7,8却不显示. 解决办法如下: 1.把 height:auto; 改成 height:1 ...
css控制div等比高度
在移动端开发中,在banner轮播图未加载出来之前,banner层是不占文档流高度的,当从服务器获取完banner数据,展示的时候,banner层因为有了内容所以会撑开,导致banner层下面的内容 ...
div中iframe高度自适应问题
网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...
dw怎么修改html框架的宽度,Dreamweaver （dw）cs6中div标签宽度和高度设置方法
很多用户给小编留言说dw cs6中div标签宽度和高度怎么设置?Dreamweaver cs6中div标签想要设置高度和宽度,该怎么设置呢?今天脚本之家小编就给大家带来Dreamweaver (dw) ...
jquery动态改变div宽度和高度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题
方法一: html: <div id="all1"><div id="left1">1</div><div id=&q ...
JS实现div宽度、高度拉伸
一.JavaScript实现宽度高度自动缓慢拉伸 <!DOCTYPE html> <html><head><meta charset="utf-8& ...

实现div可以调整高度（div实现resize）

一、div 实现resize（类似textarea）

二、监听div的resize事件

实现div可以调整高度（div实现resize）相关推荐

最新文章

热门文章