Polymer 1.x:获取customStyles 属性值
Polymer 1.x: Obtaining customStyles property value
parent-element
设置--custom-color
属性的值在child-element
。我想从 child-element
.
中的 JS 中获取 属性 的值
Here is the documentation 但我找不到任何地方提到如何做到这一点。
请提供一个工作示例 (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>
该变量被父级覆盖,我认为您无法获得原始输出(默认)值。这就是您在 运行 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>
parent-element
设置--custom-color
属性的值在child-element
。我想从 child-element
.
Here is the documentation 但我找不到任何地方提到如何做到这一点。
请提供一个工作示例 (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>
该变量被父级覆盖,我认为您无法获得原始输出(默认)值。这就是您在 运行 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>