如何使用 JavaScript 在 NativeScript 中读取 CSS 变量

Question

我在我的 NativeScript-Vue 应用程序中使用 CSS 变量，如 official documentation. I am looking for a way to read the value of a variable using JavaScript. Since there is no real browser engine, the established way 中所述不起作用。

Answer 1

文档不多，其实API文档中提到了一个方法：Style.getCssVariable(name)。使用此方法，您可以读取 CSS 变量，在 app.[s]css 中定义如下：

const color = this.$root.nativeView.style.getCssVariable('--color-primary')
console.log(color); // e.g. '#FF0000'

我原以为这也适用于 this.$el，但出于某种原因，这只会在我的设置中 return null，尽管变量在全局范围内并以相同组件的样式提供。也许其他人可以澄清，这是为什么。

Answer 2

在app.css

.main{
    --primary: #02AC46;
    --secondary: #ED7200;
}

任意 .css

background-color: var(--primary);

如何使用 JavaScript 在 NativeScript 中读取 CSS 变量

How can I read a CSS Variable in NativeScript using JavaScript

nativescript-vue