批量获取dom指定样式属性值

批量获取dom指定样式属性值

	interface Option {
		[key: string]: string
	}

	/**
	 * @description: 批量获取属性值
	 * @param {any} el
	 * @param {Option} option
	 * @return {*}
	 * @author: lkx
	 */

	const getStyleAttribute = (el: any, option: Option): any => {
		const newOption = {}

		try {
			// 需要获取的属性集合
			const attributeList = Object.keys(option)
			// 获取到的样式表
			const styleList = getComputedStyle(el, null) || {}

			attributeList.forEach((item) => {
				newOption[item] =
					option[item] === 'number'
						? Number(styleList[item]?.replace(/[^\d.]*/g, '') || 0)
						: styleList[item]
			})
		} catch (error) {
			console.log('getStyleAttribute', error)
		}

		return newOption
	}

		// 实际使用
		const defaultBox = document.querySelector('#default-box')

		const { marginTop: tabsTop } = getStyleAttribute(defaultBox, {
			marginTop: 'number',
		})