ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

cv-css 快捷方式,将指定节点的计算样式获取下拉 获取tailwind网页样式成原生样式

cv-css 快捷方式,将指定节点的计算样式获取下拉 获取tailwind网页样式成原生样式

cv-css 快捷方式,将指定节点的计算样式获取下拉 获取tailwind网页样式成原生样式

使用方法

  1. 先选择节点
  2. 点击cv-css 复制函数
  3. 控制台粘贴函数回车
javascript:(function(){  const code = `(() => {    const el = window.__DEVTOOLS_SELECTED_ELEMENT__ || $0;    if (!el) { console.warn('先先在 Elements 面板里选中一个节点!'); return; }    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);  })();`;  navigator.clipboard.writeText(code).then(() => {    alert('代码已复制到剪贴板,快去 Console 粘贴执行吧!');  }).catch(err => {    // 降级方案    const textarea = document.createElement('textarea');    textarea.value = code;    document.body.appendChild(textarea);    textarea.select();    document.execCommand('copy');    document.body.removeChild(textarea);    alert('代码已复制到剪贴板,快去 Console 粘贴执行吧!');  });})();
返回列表