@ifreeovo/highlight-dom/dist/es/dom.d.ts

实现类似dom-inspector的高亮效果

interface BaseStyle {
    width: string;
    height: string;
}
export type DOMElement = HTMLElement | SVGElement;
type BoxModelLevel = 'content' | 'padding' | 'border' | 'margin';
export interface InlineStyle extends BaseStyle {
    left: string;
    top: string;
}
export interface ElementInfo {
    borderTopWidth: number;
    borderRightWidth: number;
    borderBottomWidth: number;
    borderLeftWidth: number;
    marginTop: number;
    marginRight: number;
    marginBottom: number;
    marginLeft: number;
    paddingTop: number;
    paddingRight: number;
    paddingBottom: number;
    paddingLeft: number;
    contentWidth: number;
    contentHeight: number;
    top: number;
    left: number;
    bottom: number;
    tagName: string;
    id: string;
    classList: string[];
    isSVG: boolean;
}
export type ElementInfoKey = keyof ElementInfo;
export declare function isElementNode(ele: EventTarget): ele is DOMElement;
export declare function isHTMLElement(ele: EventTarget): ele is HTMLElement;
export declare function isSVG(ele: EventTarget): ele is SVGElement;
export declare function isVisibleElementNode(ele: EventTarget): boolean;
export declare function getOffsetHeight(ele: DOMElement): number;
export declare function getOffsetWidth(ele: DOMElement): number;
export declare function isElementInViewport(ele: DOMElement): boolean;
export declare function $(selector: string, parent?: Element): Element | null;
export declare function removeDom(ele?: Element): void;
export declare function getMaxZIndex(): number;
/**
 * @example
 * 例如'<div class="a-1 a-2"></div>'，匹配结果为'class="a-1 a-2"'
 */
export declare function matchClassAttribute(text: string): RegExpMatchArray | null;
/**
 * @example
 * 例如class="a-1 a-2"，提取结果为"['a-1', 'a-2']"
 */
export declare function extractClassNames(text: string): Array<string>;
export declare function getScale(ele: DOMElement): {
    scaleX: number;
    scaleY: number;
};
export declare function getElementInfo(ele: DOMElement): ElementInfo;
/**
 * @remarks 元素水平方向上dom宽度的结构顺序
 */
declare const horizontalOrder: readonly ["marginLeft", "borderLeftWidth", "paddingLeft", "contentWidth", "paddingRight", "borderRightWidth", "marginRight"];
/**
 * @remarks 元素垂直方向上dom宽度的结构顺序
 */
declare const verticalOrder: readonly ["marginTop", "borderTopWidth", "paddingTop", "contentHeight", "paddingBottom", "borderBottomWidth", "marginBottom"];
/**
 * @example
 * 例如currentSide传入'padding-top'，那么距离为verticalOrder数组里，padding-top前两项'margin-top'、'border-top-width'的高度相加
 */
export declare function calcTop(elementInfo: ElementInfo, currentSide: (typeof verticalOrder)[number]): `${string}px`;
/**
 * @example
 * 例如currentSide传入'padding-left'，那么距离为horizontalOrder数组里，paddingLeft前两项'marginLeft'、'borderLeftWidth'的宽度相加
 */
export declare function calcLeft(elementInfo: ElementInfo, currentSide: (typeof horizontalOrder)[number]): `${string}px`;
/**
 * @example
 * 例如boxModel传入'padding'，则在verticalOrder数据中找到以padding开头和结尾的那一段数组，即['paddingTop','contentHeight','paddingBottom']，
 * 然后对数组里的这些值，进行累加算出模型高度
 * @remarks
 * 需要注意svg模型高度不受padding、border、margin影响
 */
export declare function getBoxModelHeight(elementInfo: ElementInfo, boxModel: BoxModelLevel): number;
/**
 * @example
 * 例如boxModel传入'padding'，则在horizontalOrder数据中找到以padding开头和结尾的那一段数组，即['paddingLeft','contentWidth','paddingRight']，
 * 然后对数组里的这些值，进行累加算出模型宽度
 * @remarks
 * 需要注意svg模型宽度不受padding、border、margin影响
 */
export declare function getBoxModelWidth(elementInfo: ElementInfo, boxModel: BoxModelLevel): number;
export {};