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

/* 设置元素可调整大小，并隐藏默认的右下角大小调整滑块 */
.resizable {
  resize: both;
  overflow: auto;
  width: 200px;
  height: 100px;
}
 
/* 自定义右下角大小调整滑块样式 */
.resizable::-webkit-resize-corner {
  background-image: url('path/to/corner-icon.png');
  background-size: contain;
  height: 16px;
  width: 16px;
}
 
/* 自定义水平或垂直调整滑块样式 */
.resizable::-webkit-resizer {
  background-color: #ccc;
  height: 100%;
  width: 16px;
}
 
/* 使用JavaScript监听元素的大小调整事件 */
document.querySelector('.resizable').addEventListener('resizemove', function(event) {
  if (event.target === event.currentTarget) {
    // 当触发事件的元素等于当前监听的元素时
    const width = event.target.offsetWidth;
    const height = event.target.offsetHeight;
    // 执行相关的操作，例如更新数据模型或界面显示
    console.log(`Size changed to: width = ${width}, height = ${height}`);
  }
});
 
// 当需要重置元素大小时，可以直接设置CSS属性或通过JavaScript来更改
document.querySelector('.resizable').style.width = '200px';
document.querySelector('.resizable').style.height = '100px';

这个代码实例展示了如何使用CSS的resize属性来让一个元素可调整大小，以及如何通过CSS伪元素自定义调整滑块的样式。同时，它也演示了如何使用JavaScript来监听和处理大小调整事件，并在需要时重置元素的大小。