JS样式获取的封装方法实例详解

 更新时间:2022年09月15日 09:58:26   作者:困困子  
这篇文章主要介绍了JS样式获取的封装方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

样式获取

style属性 只能获取标签内容style属性里面存在的一些样式

如果你需要获取对应的全局所有地方设置样式 我们就需要采用一些方法

getComputedStyle 方法属于window的方法

Window.getComputedStyle()方法返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有 CSS 属性的值。

window.getComputedStyle(元素对象,null) //返回给你的是一个样式对象

ie兼容

element.currentStyle //返回给你一个样式对象

兼容封装

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

补充:下面看下js封装常用的方法

constbaseURL=“http://xxxxx”

日期格式化

export function parseTime(time, pattern) {
    if (arguments.length === 0 || !time) {
        return null
    }
    const format = pattern || '{y}-{m}-{d} {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;
}

回显数据字典

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 : '';
}

转换字符串,undefined,null等转化为""

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

构造树型结构数据

/**
 * 构造树型结构数据
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 * @param {*} rootId 根Id 默认 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
    //对源数据深度克隆
    const cloneData = JSON.parse(JSON.stringify(data))
    //循环所有项
    const treeData = cloneData.filter(father => {
        let branchArr = cloneData.filter(child => {
            //返回每一项的子级数组
            return father[id] === child[parentId]
        });
        branchArr.length > 0 ? father.children = branchArr : '';
        //返回第一层
        return father[parentId] === rootId;
    });
    return treeData != '' ? treeData : data;
}

到此这篇关于JS样式获取的封装方法的文章就介绍到这了,更多相关JS样式获取封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript函数式编程实现介绍

    JavaScript函数式编程实现介绍

    函数式编程是一种编程范式,将整个程序都由函数调用以及函数组合构成。 可以看成一条流水线,数据可以不断地从一个函数的输出流入另一个函数的输入,最后输出结果
    2022-09-09
  • 可能被忽略的一些JavaScript数组方法细节

    可能被忽略的一些JavaScript数组方法细节

    这篇文章主要给大家介绍了一些可能被忽略的JavaScript数组方法细节,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-02-02
  • JavaScript可选链的实现示例

    JavaScript可选链的实现示例

    本文主要介绍了JavaScript可选链的实现示例,它通过使用问号(?)来判断属性或函数是否存在,避免了因为属性或函数不存在而导致的错误,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • js函数的延迟加载实现代码

    js函数的延迟加载实现代码

    延迟加载的函数,第一次调用后,会覆盖原来的老函数,以后再次调用的是新函数,不会再进行条件的判断,提升效率
    2012-10-10
  • IE php关于强制下载文件的代码

    IE php关于强制下载文件的代码

    这个东东,把我搞得晕晕乎乎的,FF下,没有强制下载文件这个问题。
    2008-08-08
  • 如何使用JS中的webWorker

    如何使用JS中的webWorker

    作为浏览器脚本语言,如果JavaScript不是单线程,那么就有点棘手了。比如,与用户交互或者对DOM进行操作时,在一个线程上修改某个DOM,另外的线程删除DOM,这时浏览器该如何抉择呢?
    2021-05-05
  • JavaScript异步编程Promise模式的6个特性

    JavaScript异步编程Promise模式的6个特性

    Promise说起来是一个非常简单的概念,即使你没有机会去使用它,很有可能你也了解过它。Promise是一个非常有价值的构造器,能够帮助你避免使用镶套匿名方法,而使用更具有可读性的方式组装异步代码。这里我们将介绍6个最简单的特性,希望对大家有帮助
    2014-04-04
  • 聊一聊JS中this的指向问题

    聊一聊JS中this的指向问题

    这篇文章主要为大家详细介绍了聊一聊JS中this的指向问题,帮助大家轻松了解JS中this的指向,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 基于canvas实现的绚丽圆圈效果完整实例

    基于canvas实现的绚丽圆圈效果完整实例

    这篇文章主要介绍了基于canvas实现的绚丽圆圈效果,以完整实例形式分析了JavaScript结合html5的canvas实现动态图形的绘制技巧,需要的朋友可以参考下
    2016-01-01
  • 微信小程序授权登录及解密unionId出错的方法

    微信小程序授权登录及解密unionId出错的方法

    这篇文章主要介绍了微信小程序授权登录及解密unionId出错的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论