@mdui/jq/methods/attr.js

拥有和 jQuery 相似 API 的轻量级 JavaScript 工具库

import { $ } from '../$.js';
import { getAttribute, setAttribute } from '../shared/attributes.js';
import { getStyle, cssNumber } from '../shared/css.js';
import { isElement, isFunction, isNumber, isUndefined, isObjectLike, eachArray, eachObject, toKebabCase, } from '../shared/helper.js';
import './each.js';
eachArray(['attr', 'prop', 'css'], (name, nameIndex) => {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const set = (element, key, value) => {
        // 值为 undefined 时，不修改
        if (isUndefined(value)) {
            return;
        }
        // attr
        if (nameIndex === 0) {
            return setAttribute(element, key, value);
        }
        // prop
        if (nameIndex === 1) {
            // @ts-ignore
            element[key] = value;
            return;
        }
        // css
        key = toKebabCase(key);
        // 获取默认后缀。以 -- 开头的为 CSS 变量，不添加后缀；值为数值类型的不添加后缀
        const getSuffix = () => key.startsWith('--') || cssNumber.includes(key) ? '' : 'px';
        element.style.setProperty(key, isNumber(value) ? `${value}${getSuffix()}` : value);
    };
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const get = (element, key) => {
        // attr
        if (nameIndex === 0) {
            // 属性不存在时，原生 getAttribute 方法返回 null，而 jquery 返回 undefined。这里和 jquery 保持一致
            return getAttribute(element, key);
        }
        // prop
        if (nameIndex === 1) {
            // @ts-ignore
            return element[key];
        }
        return getStyle(element, key);
    };
    $.fn[name] = function (key, 
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    value) {
        if (isObjectLike(key)) {
            eachObject(key, (k, v) => {
                // @ts-ignore
                this[name](k, v);
            });
            return this;
        }
        if (arguments.length === 1) {
            const element = this[0];
            return isElement(element) ? get(element, key) : undefined;
        }
        return this.each((i, element) => {
            set(element, key, isFunction(value) ? value.call(element, i, get(element, key)) : value);
        });
    };
});