聚合物1.x：获得customStyles属性值

debugcn 发表于 Dev

让我思考一下

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

这是文档，但是我找不到在该处提到的如何执行此操作的文档。

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

<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>

安德鲁·伯恩（Andrew Bone）

该变量被父级覆盖，我认为您无法获得原始值（默认值）。这就是您在运行时获得价值的方式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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。