聚合物的1.x：如何势在必行（使用JS）获得自定义CSS属性的值？(Polymer 1.x: How

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

在子元素的JS，我想读--custom-color的父母选择的值。 在这种情况下，该值是yellow 。 换句话说：在当getCustomColor() “您的自定义颜色是黄色”运行的方法，我想控制台日志阅读

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

my-parent-element.html

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

my-child-element.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>

FYI： 本文档介绍了自定义样式API 。 但我似乎无法找到参考一下我描述了这个问题。

Answer 1:

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

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

Answer 2:

每通过@BryanDowning评论：

var s = document.querySelector('p');
var yourColor = window.getComputedStyle(s).getPropertyValue('color');
// Using Polymer syntax, the above line could be written as follows:
var yourColor = s.getComputedStyleValue('color');

那种作品。 它返回的当前值color第一属性p元件。

文章来源: Polymer 1.x: How to imperatively (using JS) obtain the value of a custom CSS property?