CSS 转 JS 样式对象转换器
粘贴 CSS 声明(属性: 值;),即可获得带 camelCase 键的 JavaScript 样式对象,可直接用于 React 的 `style` 属性或任意 JS 样式。会处理浏览器前缀和 CSS 自定义属性。全部在浏览器本地运行——不会上传任何内容。
—
JS 样式对象
使用方法
- 在输入框中粘贴你的 CSS 声明。
- 每个属性转为 camelCase,每个值以字符串加引号。
- 从输出框复制生成的样式对象。
常见问题
- 属性名如何转换?
- 带连字符的属性转为 camelCase(font-size 变为 fontSize)。浏览器前缀遵循 React 规则:-webkit- 变为 Webkit,而 -ms- 保持小写 ms。
- CSS 自定义属性怎么处理?
- 像 --main-color 这样的变量保留名称并成为带引号的键,因为 React 会原样应用它们。
- 值会转换为数字吗?
- 不会。所有值都以带引号的字符串输出,这始终有效。如需无单位数值,可手动去掉引号。
- 我的 CSS 会被发送到某处吗?
- 不会。转换完全在你的浏览器中进行,不会上传任何内容。
相关工具
HTML → JSX 转换
粘贴 HTML 片段,得到 React 可用的 JSX — `class` 变 `className`、`onclick` 变 `onClick`、void 标签自闭合、内联样式可对象化。
开发 0 0
JS 对象 ↔ JSON
把 JavaScript 对象字面量 (`{name: 'Alice'}`) 转为严格 JSON — 或把严格 JSON 反向转为带无引号键的整洁 JS 字面量。
转换 0 0
HTML / CSS / JS 压缩器
去除 HTML、CSS、JavaScript 的空白与注释——查看体积减少并复制结果。
开发 0 0
EditorConfig 生成器
在浏览器中生成包含缩进风格、行尾、字符集和常用覆盖项的 .editorconfig 文件。
开发 0 0
CSS 选择器测试器
在浏览器中针对你的 HTML 测试 CSS 选择器,精确查看匹配到哪些元素。
开发 0 0
CSS Flexbox 演练场
可视化选择 flex-direction、justify-content、align-items 与 gap——复制 CSS 或 Tailwind 类。
开发 0 0