dom 操作

dom 常用操作

•

这小节将记录dom的常用操作，希望对大家有帮助。

1.dom绑定事件

/**
 * 功能：dom绑定事件
 * 参数：element(dom节点)
 *      event(事件名称)
 *      handler(回调)
 *返回：无
 * */
const on = function () {
    if (document.addEventListener) {
        return function (element, event, handler) {
            if (element && event && handler) {
                element.addEventListener(event, handler, false);
            }
        };
    } else {
        return function (element, event, handler) {
            if (element && event && handler) {
                element.attachEvent('on' + event, handler);
            }
        };
    }
}();

/**
 * 功能：移除dom绑定的事件
 * 参数：element(dom节点)
 *      event(事件名称)
 *      handler(回调函数)
 * 返回：无
 * */
const off = function () {
    if (document.removeEventListener) {
        return function (element, event, handler) {
            if (element && event) {
                element.removeEventListener(event, handler, false);
            }
        };
    } else {
        return function (element, event, handler) {
            if (element && event) {
                element.detachEvent('on' + event, handler);
            }
        };
    }
}();

/**
 * 功能：dom绑定一次事件
 * 参数：element(dom)
 *      event(事件名称)
 *      fn(回调函数)
 * 返回：无
 * */
const once = function(element, event, fn) {
    var listener = function listener() {
        if (fn) {
            fn.apply(this, arguments);
        }
        off(element, event, listener);
    };
    on(element, event, listener);
};

2.获取dom元素属性

/**
 * 功能：获取dom元素的宽，高,left,top,bottom,right 距离浏览器边缘
 * 参数：element(dom)
 * 返回：Object
 * */
const domPosition = dom =>{
    return dom.getBoundingClientRect();
}

3.获取html根节点fontsize

/**
 * 功能：获取html根节点fontsize
 * 返回：fontsize
 * */
export const htmlFontSize = ()=>{
    let fontsize = getComputedStyle(window.document.documentElement)['font-size'];
    return parseInt(fontsize);
}