expand-element / getElementMargin
Function: getElementMargin()
ts
function getElementMargin(el: HTMLElement): {
bottom: number;
left: number;
right: number;
top: number;
}1
2
3
4
5
6
2
3
4
5
6
获取 Element 的外边距 margin
version: v0.0.2+example
GetElementMargin
Details
vue
<template>
<div class="element-margin" ref="elementMargin">GetElementMargin</div>
<button class="btn" @click="getFn">获取</button>
<pre class="pre">{{ code }}</pre>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
// import { getElementMargin } from 'expand-element'
import { getElementMargin } from './../../../../lib/main'
const elementMargin = ref<HTMLElement | null>(null)
const code = ref('')
const getFn = () => {
if (elementMargin.value) {
const res = getElementMargin(elementMargin.value)
code.value = JSON.stringify(res, null, 2)
}
}
</script>
<style scoped>
.element-margin {
margin: 10px 5px 15px 0;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Parameters
el
HTMLElement
要获取外边距的元素。
Returns
ts
{
bottom: number;
left: number;
right: number;
top: number;
}1
2
3
4
5
6
2
3
4
5
6
包含元素四个方向外边距的对象，包含 left, right, top, bottom 属性，值为像素值，非浏览器环境时，返回 { left: 0, right: 0, top: 0, bottom: 0 }。
bottom
ts
bottom: number = 0;1
left
ts
left: number = 0;1
right
ts
right: number = 0;1
top
ts
top: number = 0;1