如何在浏览器中检查 CSS 变量? [英] How do you inspect CSS variables in the browser?

问题描述

我正在定义我的变量

有没有办法找出已定义的变量及其值?

解决方案

使用 Chrome Canary，您可以通过查看元素的 Computed 样式并启用 Show all 来访问它过滤器:

<块引用>

...

I am defining my variables as per the spec like so:

:root {
 --my-colour: #000;
}

And accessing them like this:

.my-element {
  background: var( --my-colour );
}

Which works fine.

However I was wondering if there was a way of debugging or inspecting the :root CSS rule to see what variables have been defined, and what their values were?

From my understanding the :root selector and html selectors both target the same element however when I inspect the html element using Chrome's debugging tools I cannot see anything defined:

Is there a way finding out what variables have been defined and their values?

解决方案

Using Chrome Canary, you can access this by viewing the element's Computed styles and enabling the Show all filter:

...

这篇关于如何在浏览器中检查 CSS 变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！