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