UNPKG

@cloudcome/utils-browser

Version:
1 lines 2.13 kB
{"version":3,"file":"dom.cjs","sources":["../src/dom.ts"],"sourcesContent":["import { objectEach } from '@cloudcome/utils-core/object';\n\n/**\n * 表示 CSS 样式声明的类型,仅包含可用的字符串或数字类型的属性\n * @typedef {Object} Style\n * @property {string | number} [K] - CSS 样式属性,K 为 CSSStyleDeclaration 的键名,且值为字符串或数字类型\n */\nexport type Style = {\n [K in keyof CSSStyleDeclaration as K extends number\n ? never\n : CSSStyleDeclaration[K] extends string | number\n ? K\n : never]: CSSStyleDeclaration[K];\n};\n\n/**\n * 设置元素的样式\n * @param {HTMLElement} el - 需要设置样式的 HTML 元素\n * @param {string | Partial<Style> | Record<string, string>} style - 样式字符串或样式对象\n * @example\n * // 设置 body 元素的颜色为红色,并设置一个自定义变量\n * setStyle(document.body, { color: 'red', '--var': 'value' });\n * @example\n * // 使用字符串设置样式\n * setStyle(document.body, 'color: red; --var: value;');\n */\nexport function setStyle(el: HTMLElement, style: string | Partial<Style> | Record<string, string>) {\n if (typeof style === 'string') {\n el.style.cssText = style;\n } else {\n objectEach(style, (value, key) => {\n el.style.setProperty(key as string, value as string | null);\n });\n }\n}\n\n/**\n * 获取元素的指定样式值\n * @param {HTMLElement} el - 需要获取样式的 HTML 元素\n * @param {keyof Style} style - 需要获取的样式属性\n * @returns {string} 返回指定样式的值\n * @example\n * // 获取 body 元素的颜色\n * const color = getStyle(document.body, 'color');\n */\nexport function getStyle(el: HTMLElement, style: keyof Style) {\n return window.getComputedStyle(el).getPropertyValue(style);\n}\n"],"names":["objectEach"],"mappings":";;;AA0BgB,SAAA,SAAS,IAAiB,OAAyD;AAC7F,MAAA,OAAO,UAAU,UAAU;AAC7B,OAAG,MAAM,UAAU;AAAA,EAAA,OACd;AACMA,WAAAA,WAAA,OAAO,CAAC,OAAO,QAAQ;AAC7B,SAAA,MAAM,YAAY,KAAe,KAAsB;AAAA,IAAA,CAC3D;AAAA,EAAA;AAEL;AAWgB,SAAA,SAAS,IAAiB,OAAoB;AAC5D,SAAO,OAAO,iBAAiB,EAAE,EAAE,iBAAiB,KAAK;AAC3D;;;"}