javascript - polymer 1.x : How to imperatively (using JS) obtain the value of a custom CSS property?

Question

在下面的示例中，我有一个调用子自定义元素的父自定义元素。子项具有可在父级 CSS 中定义的 p 元素的可变 color CSS 属性。

在子元素的JS中，想读取父元素处选择的--custom-color值。在本例中，值为 yellow。换句话说:当 getCustomColor() 方法运行时，我希望控制台日志显示为“您的自定义颜色是黄色。”

我在 getCustomColor() 方法中放入什么 JavaScript 来定义 var yourColor？

我的父元素.html

<style>
  my-child-element {
    --custom-color: yellow;
  }
</style>
<template>
  <my-child-element></my-child-element>
</template>

我的子元素.html

<style>
  p {
    color: var(--custom-color);
  }
</style>
<script>
  getCustomColor: function() {
    var yourColor = // What goes here to obtain the correct value of 'yellow'?
    console.log('Your custom color is' + yourColor);
  }
</script>

仅供引用:This documentation describes the custom style API .但我似乎找不到我在这个问题中描述的内容的引用。

Answer 1

您链接的文档实际上提到了它...

你只需要检查 this.customStyle['--my-property-name'] 它就会有属性的值