Polymer 1.x：获取customStyles属性值 [英] Polymer 1.x: Obtaining customStyles property value

问题描述

这是我的jsBin 。

parent-element 设置 - custom-color code> child-element 。我想从子元素中的JS中获取该属性的值。

The parent-element sets the value of the --custom-color property in the child-element. I want to get the value of that property from the JS in the child-element.

这里是文档，但我找不到它在任何地方提到如何

Here is the documentation but I can not find it mentioned anywhere in there how to do this.

请提供您的答案的工作示例（jsBin）。

Please provide a working example (jsBin) with your answer.

<h4>http://jsbin.com/kevanicebu/edit?html,console,output</h4>
<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">

<dom-module id="parent-element">
  <style>
    child-element {
      --custom-color: blue;
    }
  </style>
  <template>
    <child-element></child-element>
  </template>
  <script>
    Polymer({
      is: 'parent-element',
    });
  </script>
</dom-module>

<dom-module id="child-element">
  <style>
    h1 {
      color: var(--custom-color, green);
    }
  </style>
  <template>
    <h1 on-tap="showColor">Click Me</h1>
    <p>I want the console to log the <code>--custom-color</code> property (i.e., "blue") when the user clicks above.</p>
    <p>Right now, it reads: "undefined."</p>
    <p>What changes do I make to the <code>showColor()</code> method?</p>
  </template>
  <script>
    Polymer({
      is: 'child-element',
      showColor: function() {
        // What do I need to change in the below line of code?
        console.log(this.customStyle['--custom-color']);
      }
    });
  </script>
</dom-module>

<parent-element></parent-element>

推荐答案

变量被父覆盖，我不认为你可以得到原来的（默认）值。这是你在运行 this.getComputedStyleValue（' - custom-color'）

The variable is overwritten by the parent, I don't think you can get the original out (default) value. This is how you get the value at the time of running this.getComputedStyleValue('--custom-color')

<h4>http://jsbin.com/kevanicebu/edit?html,console,output</h4>
<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">

<dom-module id="parent-element">
  <style>
    child-element {
      --custom-color: blue;
    }
  </style>
  <template>
    <child-element></child-element>
  </template>
  <script>
    Polymer({
      is: 'parent-element',
    });
  </script>
</dom-module>

<dom-module id="child-element">
  <style>
    h1 {
      color: var(--custom-color, green);
    }
  </style>
  <template>
    <h1 on-tap="showColor">Click Me</h1>
    <p>I want the console to log the <code>--custom-color</code> property (i.e., "blue") when the user clicks above.</p>
    <p>Right now, it reads: "undefined."</p>
    <p>What changes do I make to the <code>showColor()</code> method?</p>
  </template>
  <script>
    Polymer({
      is: 'child-element',
      showColor: function() {
        // What do I need to change in the below line of code?
        console.log(this.getComputedStyleValue('--custom-color'));
      }
    });
  </script>
</dom-module>

<parent-element></parent-element>

这篇关于Polymer 1.x：获取customStyles属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！