调整html元素大小 resize

1、使用css属性：resize

div{ resize: both;}

resize 属性规定是否可由用户调整元素的尺寸。

取值：

none：默认，用户无法调整元素的尺寸。
Both：用户可调整元素的高度和宽度。
Horizontal：用户可调整元素的宽度。
Vertical：用户可调整元素的高度。

缺点：不支持ie！仅Firefox 4+、Chrome 以及 Safari 支持 resize。

2、自己造一个轮子

使用拖拽改变元素大小。

以上图为例，父层div包裹着内容区，在父层div里还有三个div，分别位于父层div的下方，右方及右下方。拖拽下方div可改变父层div的高度，拖拽右方div可改变父层div的宽度，拖拽右下方div可改变父层div的宽度及高度。

//代码实现
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>resize</title><style>.myResize{width: 300px;height:300px;position: relative;border-top: 3px solid #00f;border-left: 3px solid #00f;}.myResize .bottom,.myResize .right,.myResize .bottom-right{position: absolute;background: #00f;}.myResize .bottom{width: calc(100% - 6px);height:3px;bottom:0;cursor: s-resize;}.myResize .right{width: 3px;height:calc(100% - 6px);right:0;cursor: e-resize;}.myResize .bottom-right{width: 6px;height:6px;right:0;bottom:0;cursor: se-resize;}.myResize .content{width: calc(100% - 3px);height: calc(100% - 3px);position: absolute;background: #efefef;}</style>
</head>
<body><div class="myResize"><div class="bottom"></div><div class="right"></div><div class="bottom-right"></div><div class="content"></div></div><script>function resize(option){option = option || {};var minWidth = parseInt(option.minWidth) || 5,//最小宽度，未设置则默认5minHeight = parseInt(option.minHeight) || 5,//最小高度，未设置则默认5el = document.querySelector(option.el),hasWidth,hasHeight;el.draggable = false;el.parentNode.draggable = false;switch(option.type){case 'bottom':hasHeight = true;break;case 'right':hasWidth = true;break;case 'bottom-right':hasWidth = true;hasHeight = true;break;default:return;}el.onmousedown = function (e) {//鼠标按下，计算当前元素距离可视区的距离if(hasWidth){var disX = e.clientX;var w = parseInt(window.getComputedStyle(el.parentNode).width);}if(hasHeight){var disY = e.clientY;var h = parseInt(window.getComputedStyle(el.parentNode).height);}document.onmousemove = function (e) {var ew,eh;//通过事件委托，计算移动的距离if(hasWidth){var tx = disX - e.clientX;ew = w-tx;el.parentNode.style.width = (ew<minWidth?minWidth:ew) + 'px';}if(hasHeight){var ty = disY - e.clientY;eh = h-ty;el.parentNode.style.height = (eh<minHeight?minHeight:eh) + 'px';}//回调函数option.callBack && option.callBack(ew?ew:eh,ew?eh:null);};document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};};}function callBack(w,h){console.log(w,h)}['bottom','right','bottom-right'].forEach(function(item,index){resize({el:'.'+item,type:item,callBack:callBack//回调函数})})</script>
</body>
</html>

vue自定义resize指令，拖拽改变父元素高度

Vue.directive('dragsize',//自定义指令{bind:function (el, binding, vnode) {el.draggable = false;el.onmousedown = function (e) {el.parentNode.draggable = false//鼠标按下，计算当前元素距离可视区的距离let disY = e.clientY;let h = parseInt(window.getComputedStyle(el.parentNode).height);document.onmousemove = function (e) {//通过事件委托，计算移动的距离let t = disY - e.clientY;el.parentNode.style.height = ((h+t)<5?5:(h+t)) + 'px';//最小宽度，默认5//回调函数binding.value(h+t)};document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};};}}
);

调整html元素大小 resize相关推荐

linux分区设置大小,Linux调整磁盘分区大小
Resize the disk (Linux调整磁盘分区大小) Resize the partition. Run parted: $ parted Show the partition list: ...
调整谷歌reCAPTCHA大小 How to resize the Google noCAPTCHA reCAPTCHA
最近调试reCAPTCHA的时候,发现手机版的reCAPTCHA会不适应大小: 经修改后应该为: 代码如下: .g-recaptcha {transform:scale(0.77);-webkit-t ...
matlab重置矩阵大小resize,JS resize事件：窗口重置
在 JavaScript 中,resize 事件是在浏览器窗口被重置时触发的,如当用户调整窗口大小,或者最大化.最小化.恢复窗口大小显示时触发 resize 事件.利用该事件可以跟踪窗口大小的变化以便 ...
php绘制图像黑色的数值,canvas.toDataURL（）通过尝试调整base64的大小而导致黑色图像字符串...
我目前正在尝试调整base64图像的大小,因为图像文件太大而无法在稍后使用php进行处理.我找到了一种通过使用画布调整图像大小来实现这一点的方法.不幸的是,我得到的图像只是一个宽度为300px,高度为 ...
JS图表工具FusionCharts调整图表百分比大小
2019独角兽企业重金招聘Python工程师标准>>> 在使用FusionCharts的时候,用户可以为图表的宽度和高度设置百分比值,用来替代绝对的像素值.图表将根据父容器元素自动调 ...
【ruoyi若依】layer 重置大小/resize
前言略 layer 重置大小/resize 通过layer.style方法重置大小/resize. 示例 var getDefaultWidth = ()=>{return $(window) ...
hashmap大小_调整HashMap的大小：未来的危险
hashmap大小最近,我偶然发现了一个错误,该错误是由于多个线程对java.util.HashMap的使用不当引起的. 该错误是泄漏抽象的一个很好的例子. 只有了解数据结构的实现级别详细信息,才能 ...
调整HashMap的大小：未来的危险
最近,我偶然发现了一个错误,该错误是由于多个线程对java.util.HashMap的使用不当引起的. 该错误是抽象泄漏的一个很好的例子. 只有了解数据结构的实现级别详细信息,才能帮助我解决当前的问题 ...
调整灰度图像的大小，而无需在Python中使用任何内置函数
In this program, we will be using two functions of OpenCV-python (cv2) module. Let's see their synta ...
动态调整linux分区大小,GParted 动态调整Linux分区大小
在虚拟化环境中虚拟机运行一段时间后数据量持续增长,磁盘分区都需要进行扩容,对于Windows系统相对简单,在磁盘瘦格式的状态下直接修改虚拟机磁盘大小,在系统中的磁盘管理里扩展分区即可,实时生效连重启都 ...

调整html元素大小 resize

调整html元素大小 resize相关推荐

最新文章

热门文章