2016-07-12 19 views
0

Here is my jsBin.Polymer 1.x: Beziehen des customStyles-Eigenschaftswerts

Die parent-element setzt den Wert der --custom-color Eigenschaft in der child-element. Ich möchte den Wert dieser Eigenschaft aus dem JS in child-element abrufen.

Here is the documentation aber ich kann es nirgendwo dort nirgendwo erwähnt finden, wie man das macht.

Bitte geben Sie ein Arbeitsbeispiel (jsBin) mit Ihrer Antwort.

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

+0

Das klingt fast identisch mit der [Frage] zum Laufen bringen (http://stackoverflow.com/questions/38317155/polymer-1 -x-how-to-imperative-using-js-erhalten-den-Wert-eines-benutzerdefinierten-css-pro) Sie vor ein paar Stunden gefragt und für die Sie eine Antwort akzeptiert. Warum fragst du die gleiche Frage noch einmal? – tony19

+0

@ tony19: Es ist meine Schuld, dass ich in meiner vorherigen Frage kein funktionierendes Beispiel angefordert habe. Also habe ich mein Problem nicht wirklich gelöst, obwohl die Antwort auf diese Frage technisch korrekt war. Wenn Sie sich das jsBin in dieser Frage anschauen, denke ich, dass es erklärt wird. – Mowzer

Antwort

2

Die Variable vom Mutter überschrieben wird, ich glaube nicht, dass Sie das Original aus (default) Wert erhalten. Dies ist, wie Sie den Wert zum Zeitpunkt der 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>