谷歌浏览器开发者工具系列27:将样式代码拷贝为脚本代码

Chrome开发者工具提供了一个小工能,让我们能够在控制台拷贝cssjs属性。这样在粘贴板里面的文本就变成了javascript代码片段了。
copy css as js - 谷歌浏览器开发者工具系列27:将样式代码拷贝为脚本代码

操作步骤

DevTools检查元素。
Style Pane面板中右键元素的当前样式属性。
在弹出的菜单中选择“Copy all declarations as JS”或者“copy a single declaration”。
现在你的粘贴板里面就会保存有下面这样一段代码:

{
    letterSpacing: '2px',
    textTransform: 'uppercase',
    textDecoration: 'none',
    textAlign: 'center',
    margin: '1em',
    padding: '25px 40px'
}

可以看待,DevTools将css中的连接符形式的属性转换成了Javasript的驼峰形式命名的变量属性。

如何使用纯JS样式

如果你想用纯JS给一个元素的样式属性进行赋值操作,可以是用Object.assign方法。这个方法可以拷贝一个目标对象到元素的style属性上去。从而修改目标对象的样式。下面是演示代码:

const anchor = document.querySelector('a');

Object.assign(anchor.style, {
    color: 'white',
    letterSpacing: '2px'
});

兼容性

这个特性目前并不是所有版本的Chrome浏览器都支持,至少要升级到98版本以上,这个操作才能被开发者使用,或者在Chrome Canary中进行使用调试使用。

发表回复 0