JS樣式獲取的封裝方法實(shí)例詳解

更新時(shí)間：2022年09月15日 09:58:26 作者：困困子

這篇文章主要介紹了JS樣式獲取的封裝方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

樣式獲取

style屬性只能獲取標(biāo)簽內(nèi)容style屬性里面存在的一些樣式

如果你需要獲取對應(yīng)的全局所有地方設(shè)置樣式我們就需要采用一些方法

getComputedStyle 方法屬于window的方法

Window.getComputedStyle()方法返回一個(gè)對象，該對象在應(yīng)用活動樣式表并解析這些值可能包含的任何基本計(jì)算后報(bào)告元素的所有 CSS 屬性的值。

window.getComputedStyle(元素對象,null) //返回給你的是一個(gè)樣式對象

ie兼容

element.currentStyle //返回給你一個(gè)樣式對象

兼容封裝

//方法的封裝
function getStyle(element,attr){
    var style =  window.getComputedStyle?window.getComputedStyle(element):element.currentStyle
    return style[attr]
}
//調(diào)用
console.log(getStyle(box,'height'));

補(bǔ)充：下面看下js封裝常用的方法

constbaseURL=“http://xxxxx”

日期格式化

export function parseTime(time, pattern) {
    if (arguments.length === 0 || !time) {
        return null
    }
    const format = pattern || '{y}-{m}-wppm3vysvbp {h}:{i}:{s}'
    let date
    if (typeof time === 'object') {
        date = time
    } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
            time = parseInt(time)
        } else if (typeof time === 'string') {
            time = time.replace(new RegExp(/-/gm), '/');
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
            time = time * 1000
        }
        date = new Date(time)
    }
    const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
    }
    const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') {
            return ['日', '一', '二', '三', '四', '五', '六'][value]
        }
        if (result.length > 0 && value < 10) {
            value = '0' + value
        }
        return value || 0
    })
    return time_str
}

表單重置

export function resetForm(refName) {
    if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
    }
}

添加日期范圍

export function addDateRange(params, dateRange) {
    var search = params;
    search.beginTime = "";
    search.endTime = "";
    if (null != dateRange && '' != dateRange) {
        search.beginTime = this.dateRange[0];
        search.endTime = this.dateRange[1];
    }
    return search;
}

回顯數(shù)據(jù)字典

export function selectDictLabel(datas, value) {
    var actions = [];
    Object.keys(datas).map((key) => {
        if (datas[key].dictValue == ('' + value)) {
            actions.push(datas[key].dictLabel);
            return false;
        }
    })
    return actions.join('');
}

通用下載方法

export function download(fileName) {
    window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true;
}

字符串格式化(%s)

export function sprintf(str) {
    var args = arguments, flag = true, i = 1;
    str = str.replace(/%s/g, function () {
        var arg = args[i++];
        if (typeof arg === 'undefined') {
            flag = false;
            return '';
        }
        return arg;
    });
    return flag ? str : '';
}

轉(zhuǎn)換字符串，undefined,null等轉(zhuǎn)化為""

export function praseStrEmpty(str) {
    if (!str || str == "undefined" || str == "null") {
        return "";
    }
    return str;
}

構(gòu)造樹型結(jié)構(gòu)數(shù)據(jù)

/**
 * 構(gòu)造樹型結(jié)構(gòu)數(shù)據(jù)
 * @param {*} data 數(shù)據(jù)源
 * @param {*} id id字段 默認(rèn) 'id'
 * @param {*} parentId 父節(jié)點(diǎn)字段 默認(rèn) 'parentId'
 * @param {*} children 孩子節(jié)點(diǎn)字段 默認(rèn) 'children'
 * @param {*} rootId 根Id 默認(rèn) 0
 */
export function handleTree(data, id, parentId, children, rootId) {
    if (!data || data.length === 0) {
        return []
    }
    id = id || 'id'
    parentId = parentId || 'parentId'
    children = children || 'children'
    rootId = rootId || 0
    //對源數(shù)據(jù)深度克隆
    const cloneData = JSON.parse(JSON.stringify(data))
    //循環(huán)所有項(xiàng)
    const treeData = cloneData.filter(father => {
        let branchArr = cloneData.filter(child => {
            //返回每一項(xiàng)的子級數(shù)組
            return father[id] === child[parentId]
        });
        branchArr.length > 0 ? father.children = branchArr : '';
        //返回第一層
        return father[parentId] === rootId;
    });
    return treeData != '' ? treeData : data;
}

到此這篇關(guān)于JS樣式獲取的封裝方法的文章就介紹到這了,更多相關(guān)JS樣式獲取封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: