美文网首页
连字符表示法和驼峰表示法的转换

连字符表示法和驼峰表示法的转换

作者: YXCoder | 来源:发表于2018-01-02 11:57 被阅读0次

在JS中获取CSS属性,我们会使用计算属性 getComputedStyle()


window.getComputedStyle()会返回一个 CSSStyleDeclaration对象,我们通过获取相应的属性来获取对应的规则,譬如:

let ele = document.querySelector('#O');
let style = window.getComputedStyle(ele);
console.log(style['fontFamily']);

我们注意到第三行 fontFamily和我们平时使用的 font-family属性不太一样,在CSS中使用的 font-family连字符表示法,到了JS里面变成了 fontFamily表示法,那么在繁多的CSS规则中,我们如何找到一种方法,来完成连字符表示法和驼峰表示法的转换呢,这里介绍一种比较好用的办法(方法来自于 zepto源码)

  • 首先是连字符表示法转换为驼峰表示法
camelize = function(str){ return str.replace(/-+(.)?/g, function(match, chr){ return chr ? chr.toUpperCase() : '' }) }

很简单的正则匹配,chr为 (.)? 中匹配的内容,也就是 - 之后的第一个字母

  • 然后是驼峰表示法转换为连字符表示法
function dasherize(str) {
    return str.replace(/::/g, '/')
           .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2')
           .replace(/([a-z\d])([A-Z])/g, '$1_$2')
           .replace(/_/g, '-')
           .toLowerCase()
  }

进行了几次转换,处理了比较多的情况,代码也比较简洁

(未完待续)

相关文章

  • 连字符表示法和驼峰表示法的转换

    在JS中获取CSS属性,我们会使用计算属性 getComputedStyle() window.getComput...

  • 字符串编码转换

    字符串编码转换 字符串编码转换涉及宽字节表示法与UTF-8表示法之间的转换、宽字节表示法与UTF-16表示法之间的...

  • SMILES & InChI | 化学结构的线性表示法

    SMILES表示法、SMARTS表示法和InChI表示法都是用少量字符表示结构信息的重要方法。 化合物的图表示 可...

  • 数值-字符串互转

    e表示法(即科学计数法) 2.数值转换 Number(),可用于任何数据类型,而零连个函数则专门用于把字符串转换成...

  • 字符串转化实例

    已知字符串 str = "get-element-by-id" 写出一个function将其转化成驼峰表示法"ge...

  • 字符串 String 总结

    1.创建方法; new可以省略。变量名多用驼峰命名法。 2.方法 1>length属性:返回字符串的长度。表示字符...

  • 正则表达式Match

    1.字符组 1.1普通字符组 范围表示法: 并列范围表示法: 转义序列\x:固定前缀\x+numnum:字符对应的...

  • ECMAScript字符串扩展

    字符的Unicode表示法 JavaScript允许采用 \uxxxx 形式表示一个字符,其中“xxxx”表示字符...

  • ES6学习笔记03——字符串的扩展

    字符的 Unicode 表示法 JavaScript 允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的...

  • ES6 字符串的扩展

    字符的Unicode表示法 JavaScript允许采用\uxxxx形式表示一个字符,其中“xxxx”表示字符的码...

网友评论

      本文标题:连字符表示法和驼峰表示法的转换

      本文链接:https://www.haomeiwen.com/subject/ntpmgxtx.html