从聚合物元素中获取 this.style答案

【问题标题】：Getting this.style from a polymer element从聚合物元素中获取 this.style
【发布时间】：2014-08-08 03:35:44
【问题描述】：

刚刚学习聚合物。我想在单击时获取固定标题的颜色。

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

另外，我正在尝试设置背景颜色，但我也做不到。

【问题讨论】：

标签： javascript html css polymer

【解决方案1】：

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

var color = getComputedStyle(this).backgroundColor;

这是working jsbin。

对于您的第二条评论，请在 Chrome 36 和 38 中为我设置 style works fine。

【讨论】：