expand-element / getElementPadding
Function: getElementPadding()
ts
function getElementPadding(el: HTMLElement): {
bottom: number;
left: number;
right: number;
top: number;
}1
2
3
4
5
6
2
3
4
5
6
获取 Element 的内边距 padding
version: v0.0.1+example
GetElementPadding
Details
vue
<template>
<div class="element-padding" ref="elementPadding">GetElementPadding</div>
<button class="btn" @click="getFn">获取</button>
<pre class="pre">{{ code }}</pre>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
// import { getElementPadding } from 'expand-element'
import { getElementPadding } from './../../../../lib/main'
const elementPadding = ref<HTMLElement | null>(null)
const code = ref('')
const getFn = () => {
if (elementPadding.value) {
const res = getElementPadding(elementPadding.value)
code.value = JSON.stringify(res, null, 2)
}
}
</script>
<style scoped>
.element-padding {
padding: 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