Question

刚刚学习聚合物。我想在点击时抓住fixed-header的颜色。

<link rel="import" href="../polymer/polymer.html">
<polymer-element name="fixed-header" attributes="height" style="background-color:blue">
<template>
    <style>
        :host {
            display: block;
            background-color: red;
        }
        ::content * {
            list-style-type: none;
        }
    </style>
    <header layout horizontal on-click="{{changeColor}}">
        <content select="li"></content>
    </header>
</template>
<script>
    Polymer('fixed-header', {
        changeColor: function() {
            var color = this.style.backgroundColor
            console.log(color)
        }
    });
</script>
</polymer-element>

当我不在聚合物元素上使用内联样式时，我不能使用this.style.backgroundColor，即使它肯定会将颜色变为红色。为什么我只能通过模板样式标签使用this.style.backgroundColor？

另外，我试图设置backgroundColor，但我也不能这样做。

Answer 1

返回节点style属性内容的对象表示是style属性的expected behavior。你想要的是getComputedStyle()：

var color = getComputedStyle(this).backgroundColor;

这是working jsbin。

要发布第二条评论，请在Chrome 36和38中为我设置style works fine。

从聚合物元素中获取此风格

1 个答案: