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

CSS 样式键转换

如 fontSize -> font-size

js 复制代码
// 函数封装 -- 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

js 复制代码
// 函数封装 -- 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);

结果为:

js 复制代码
[ { props: { height: '26.67vw' } }, { props: { height: '37.33vw' } } ]
相关推荐
涵信7 分钟前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
拖孩14 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
北上ing2 小时前
同一页面下动态加载内容的两种方式:AJAX与iframe
前端·javascript·ajax
纪元A梦2 小时前
华为OD机试真题——推荐多样性(2025A卷:200分)Java/python/JavaScript/C++/C语言/GO六种最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
小墨宝3 小时前
js 生成pdf 并上传文件
前端·javascript·pdf
www_pp_4 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue4 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码4 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试