# DomResize

**Repository Path**: yinghan22/dom-resize

## Basic Information

- **Project Name**: DomResize
- **Description**: 使用鼠标直接对DOM元素进行尺寸修改，类似于操作系统中窗口尺寸修改的行为，不显示辅助点，直接对边框操作。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-05
- **Last Updated**: 2024-04-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# DOM Resize

使用鼠标对 `DOM` 元素进行进行尺寸修改。

`WebOS` 之类的项目里可能会有用，可以对某个“应用”的“窗口”大小进行更改。

使用原生 `CSS` 中的 `resize: both;` 和 `overflow: hidden;` 样式也可以实现对 `DOM` 元素尺寸的直接修改，但是只能在左下角，其他位置不行。

# 实现说明

原理很简单。

`JS` 无法对元素的边框样式进行鼠标事件的监听，但是对普通元素可以。所以创建了 8 个用于监听鼠标事件的辅助元素，这要求目标 `DOM` 元素的位置必须是相对、绝对或固定的。同时会将超出部分设置为隐藏（即`overflow: hidden;`）。

这 8 个辅助元素背景是透明的，图片中的显示样式是为告诉你，这些位置是放了小方块的。

边缘部分的宽度是 `4` 像素，代码中写的是让它平均，但是有的浏览器不太能平均分，所以你会发现图片中的有些块内外占比不均匀，其实也可以，毕竟对内部元素影响越小越好。

顶点部分的宽度是 `4` 像素，同时是平均分的。没有设置太大是因为实际体验不需要设置的太大。

这两个数值应该是比较合理的。如果页面有缩放另当别论。没有将他们参数化，使用的时候注意下就行。

![实现原理样式图](images/example.png)

# 使用说明

+ 使用 `script` 方式引入，一定要在最后引入！一定要在最后引入！一定要在最后引入！

+ 脚本会在页面 `onload` 后加载，如果你对 `window` 的 `onload` 事件有监听，不用担心，我已经做了处理，在执行这个脚本之前，会保存并调用你写的 `onload` 监听器。

+ 考虑到浏览器窗口的尺寸会对 `DOM` 的尺寸范围有影响（最大宽、高），所以脚本里同样对 `window.onresize` 做了处理。

+ 因为有对 `DOM` 的最大、最小宽度有设置，所有目前没有对负宽、负高做判断。

+ 需要修改尺寸的 `DOM` 元素的 `position` 属性必须是相对、绝对或固定定位，因为需要在其中放置可以监听鼠标事件的小方块。

+ 没有对默认事件和事件冒泡进行处理。


# 使用示例

```HTML
<div style="width: 100vw;height: 100vh;">
    <div max-height="600" min-width="100" resize
         style="position: relative;left:10px;top:30px;width: 200px;height: 300px;background: red;"></div>
</div>

<script src="./dom-resize.js"></script>
```
`div` 加上 `resize` 属性就可以对它修改尺寸。元素加上 `max-width`、`min-width`、`max-height`、`min-height` 可以对尺寸做范围限制（单位是像素哦~~），当然他们是有默认值的（默认值设置的合不合理就不知道了）

脚本中对 `resize` 的如右一些特殊字符串做了排除：`'false'`, `'not'`, `'no'`, `'never'`, `'fault'`, `'none'`。

|属性|默认值|
|:---:|:---:|
|`max-width`|`body.clientWidth - 10`|
|`min-width`|`50`|
|`max-height`|`body.clientHeight - 10`|
|`min-height`|`100`|



# 其他说明

1. 不定时更新。

2. 代码有啥问题请指出具体位置（我会看，但不一定会去改）。

3. 如果你要修改这里的代码，一定要做好说明。