如何从样式表中获取一个值到代码中以便它可以以编程方式使用？

如何解决如何从样式表中获取一个值到代码中以便它可以以编程方式使用？

我正在开发一个 Angular 8 应用程序，我们使用全局样式。我在应用程序中使用 D3 图表库并设置样式，您必须在代码中配置它。例如：

plottingArea.append('text')
    .attr('fill','#00B2B3');

这将更改 D3 图形 (svg) 中使用的文本颜色。但是由于我们使用全局样式，我需要找到一种方法将这个值拉入代码中，这样如果样式在某个时刻发生变化，我就不必更改代码。

我尝试创建一个类选择器并在那里添加颜色，然后将该类添加到用于图表的 html 元素（在本例中为 div），然后使用 @ViewChild 查询该类以获取颜色属性值：

component.scss

.my-color {
  color: global-style('text','grey');
}

component.html

<div #my-div class="my-color"></div>

component.ts

@ViewChild('my-div',{ static: false }) myDiv!: ElementRef;

ngAfterViewInit() {
  
  //this returns empty string
  const color = this.myDiv.nativeElement.style.color;

  //this returns null
  const style = this.myDiv.nativeElement.querySelector('.my-color');

}

因此，由于我无法像那样访问颜色值，所以我不知道该怎么做。

解决方法

您可以使用getComputedStyle：

const color = window.getComputedStyle(this.myDiv.nativeElement).color;

,

如果您在使用 window.getComputedStyle 获取样式时遇到问题，我认为您可能需要等到 DOM 在 ngAfterViewInit 中呈现，然后在 {{1} 中检查对 DOM 重新呈现的更改}

我认为最好的方法是创建一个可以访问 DOM 的指令。

ngOnChanges

最好的方法是使用一个指令，通过它您可以访问应用该指令的本机 DOM 元素。然后你可以等到 DOM 在 AfterViewInit 钩子中呈现出来，然后使用 getComputedStyle 方法来获取所有计算出的样式。

,

这就是我最终不得不做的事情：

component.scss

.my-color {
  fill: global-style('text','grey');
}

component.html

<div #my-div class="my-color"></div>

component.ts

plottingArea.append('text')
    .classed('my-color',true)

classed() 方法就是答案。但我仍然不确定为什么我无法获得一种风格的价值。