CSS resize 调整元素大小属性，可改变右下角滑块样式和监听重置高宽事件

前言

如标题所示，本章分三部分：

1. 介绍 CSS resize 属性；
2. 可调整右下角 resize 滑块样式，如隐藏；
3. 监听高宽调整事件；

CSS resize 属性

出现在某些元素底角的可拖动调整大小的滑块

Html

<div id="test" class="test"></div>

CSS

.test {
	width: 150px;
	height: 160px;
	background: #ccc;
	resize: both;
	overflow: auto;
}

• resize 属性有4种类型：
  • none 无法调整（默认）；
  • both 可调整高度和宽度；
  • horizontal 仅调整宽度；
  • vertical 仅能调整高度；
• 代码第6行，必须 设置 overflow 属性，否则 resize 属性无效。可以是 auto/hidden/scroll；
• 不是所有元素都可调整，如：img、table 等是无法使用 resize 属性；

效果图

调整右下角滑块样式

使用伪元素 -webkit-resizer ，可在此查看浏览器兼容情况

隐藏
仅需使用 background 属性的透明度设置 transparent。

.test::-webkit-resizer  {
	background: transparent;
}

改变颜色
如下图可看到滑块的大小只有红色区域的高宽。目前没有找到可以改变高宽的方式，如有谁知道，可告知！感谢！

.test::-webkit-resizer  {
	background: red;
}

监听高宽调整事件

window.onresize只能侦听窗口的变化，而 div 等元素的监听是没有直接的方法。

可使用插件之元素调整监测器：element-resize-detector

安装

npm i element-resize-detector

使用

// 被监听的元素
const element = document.getElementById("test");
// 引入
const elementResizeDetector = require("element-resize-detector");
// 初始化
const detector = elementResizeDetector();
// 监听
detector.listenTo(element, (el)=>{
    const width = el.offsetWidth;
    const height = el.offsetHeight;
    console.log(`宽${width}，高：${height}，元素对象：${el}`);
});