JS【实战】CSS 样式相关的处理

CSS 样式键转换

如 fontSize -> font-size

// 函数封装 -- CSS样式键转换，如 fontSize -> font-size function CSSformatKey(oldKey) {   // 查找所有大写字母，转换为 "-小写"   const newKey = oldKey.replace(/[A-Z]/g, (c) => `-${c.toLocaleLowerCase()}`);   return newKey; } let oldKey = 'fontSize'; let result = CSSformatKey(oldKey); console.log(result); 

CSS 样式单位转换

px 转 vw

// 函数封装 -- CSS样式单位转换，如 375px -> 100vw function px2vw(components = []) {   // 正则匹配 '10px' '9.5px'，并对数值分组   const reg = /^(\d+(\.\d+)?)px$/;   components.forEach((component) => {     const props = component.props || {};     // 遍历组件的属性     Object.keys(props).forEach((key) => {       const val = props[key];        // 非字符串无需转换;       if (typeof val !== 'string') {         return;       }       // 无px则无需转换       if (reg.test(val) === false) {         return;       }       // 取得匹配的分组，第1项为匹配的所有内容，如375px，第2项为匹配到的px前的数值,如375       const arr = val.match(reg) || [];       // 提取出数值部分       const numStr = arr[1];       // 将字符串数值转换为数字       const num = parseFloat(numStr);       // 因UI图的画布宽度是 375px，即100vw = 375px 则px 转 vw 的公式为  100vw = 375px/375*100       const vwNum = (num / 375) * 100;       // 避免无法除尽，保留两位小数       props[key] = `${vwNum.toFixed(2)}vw`;     });   }); }  let components = [   {     props: {       height: '100px',     },   },   {     props: {       height: '140px',     },   }, ]; px2vw(components); console.log(components); 

结果为：

[ { props: { height: '26.67vw' } }, { props: { height: '37.33vw' } } ]