copy-used-css 代码段 snippet,将指定节点的计算样式获取下拉 获取tailwind网页样式成原生样式

copy-used-css,将指定节点的计算样式获取下拉 获取tailwind网页样式成原生样式

使用方法

  1. F12 先选择节点
  2. ctrl+p 输入copy选择copy-used-css
  3. ctrl+回车 执行函数
  4. 进入vscode 进行粘贴样式
(() => {
  if (!$0) { console.warn('先先在 Elements 面板里选中一个节点!'); return; }
  const el = $0;
  const comp = getComputedStyle(el);
  const initial = document.createElement(el.tagName);
  document.body.appendChild(initial);
  const initStyle = getComputedStyle(initial);
  const used = [...comp]
    .filter(k => comp[k] !== initStyle[k] && !k.startsWith('-')) // 去掉私有前缀
    .map(k => `${k}: ${comp.getPropertyValue(k)};`)
    .join('\n');
  copy(used);
  initial.remove();
  console.log('已复制非默认样式:\n', used);
})();
posted @ 2025-09-23 20:02  彭成刚  阅读(8)  评论(0)    收藏  举报