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前的数值,如375const arr = val.match(reg) || [];// 提取出数值部分const numStr = arr[1];// 将字符串数值转换为数字const num = parseFloat(numStr);// 因UI图的画布宽度是 375px，即100vw = 375px 则px 转 vw 的公式为 100vw = 375px/375*100const 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' } } ]