通過Javascript更新自定義CSS屬性

Question

我正在使用paper-scroll-header-panel並使用自定義CSS屬性

 paper-scroll-header-panel {
   --paper-scroll-header-panel-full-header: {
            background-image: url(images/abcd.jpg);
          };
}

為全尺寸標題設置樣式。 我的問題是，此自定義組件的標題圖像應根據從加載此組件的頁面傳遞的圖像URL而有所不同。 因此，我已經定義了一個屬性，並試圖通過計算屬性來分配它，但這似乎不起作用。 這就是我所做的。

<paper-scroll-header-panel style$={{backgroundCover}}>

在JS中：

Polymer({
  is: 'dummy-layout',
  properties: {
    cover: String,
    backgroundCover: {
        type: String,
        computed: 'computeBackground(cover)'
    }
  },    
  computeBackground: function(cover) {
    return '--paper-scroll-header-panel-full-header: { background-image: url(' + cover + ');};';
    },

但這是行不通的。 在使用自定義CSS組件時，如何使用因不同組件實例而異的背景圖像？

更新：當前代碼如下。 還是行不通。

<dom-module id="recipe-layout">

  <link rel="import" type="css" href="recipe-layout.css">
  <style is="custom-style">

    paper-scroll-header-panel {
      position: absolute;
      /* background for toolbar when it is at its full size */
      --paper-scroll-header-panel-full-header: {
        background-image: url();
      };
      /* background for toolbar when it is condensed */
      --paper-scroll-header-panel-condensed-header: {
        background-color: #00bcd4;
      };
    }
    paper-toolbar {
      height: 400px;
      background-color: transparent;
    }
</style>
<template>
 <paper-scroll-header-panel condenses condensed-header-height="56" id="scroller">

        <!-- Main Toolbar -->
        <paper-toolbar>
          <paper-icon-button icon="arrow-back" onclick="javascript:history.go(-1)"></paper-icon-button>
          <div class="flex"></div>
          <paper-icon-button icon="more-vert"></paper-icon-button>
          <div class="bottom title"><content select=".cover-title"></content></div>
        </paper-toolbar>

        <div class="content">
            <content select=".main-content"></content>
        </div>

      </paper-scroll-header-panel>
</template>

  <script>

    Polymer({

      is: 'dummy-layout',

      properties: {
        cover: {
            type: String,
            observer: '_updateBg'
        },
      },

      _updateBg: function(cover) {
        this.async(function() { this.subupdateBg(cover); }, 100);
      },

      subupdateBg: function(cover) {
        var scrollerBg = this.$.scroller;
        console.dir(scrollerBg);
        var newStyle = 'background-image: url('+ cover + ');';
        scrollerBg.customStyle['--paper-scroll-header-panel-full-header'] = newStyle;
        scrollerBg.updateStyles();
    }
  </script>

</dom-module>

Answer 1

您不能在style屬性中更改自定義css屬性，因為它僅在元素創建時評估。 您必須在元素內的customStyle屬性中應用它們，然后調用updateStyles方法。

資料來源： https : //www.polymer-project.org/1.0/docs/devguide/styling.html#style-api

Answer 2

@尼爾是對的。 --paper-scroll-header-panel-full-header是一種CSS變量。 在這里，我舉了一個小例子 ，演示了如何操作它們：

<dom-module id="dummy-layout">

  <style>
    :host {
      --bg: {
        background-color: red;
      }
    }

    .test {
      @apply(--bg);
    }
  }
  </style>

    <template>
      <div class="test">Hello world</div>
      <button type="button" on-click=btn>Click</button>
    </template>

  <script>
    Polymer({
      is: "dummy-layout",
      properties: {
        data: {
          type: String,
          observer: '_updateStyle'
        },
      },
      btn: function () {
        this.set('data', Math.random());
      },
      _updateStyle: function () {
        var colors = ['blue', 'green'];
        this.i = (this.i || 0) + 1;
        var newStyle = 'background-color: '+colors[this.i%2]+';';
        this.customStyle['--bg'] = newStyle;
        this.updateStyles();
      }
    });
  </script>

</dom-module>

您的代碼幾乎可以正常工作。 實際發生的情況是，永遠不會調用樣式更改代碼，因為覆蓋不會更改。 如果您添加更改它或其他任何功能的按鈕。 這是您的代碼，幾乎沒有修改： http : //pastebin.com/beNAYMRF

Answer 3

如果您檢查paper-scroll-header-panel（ https://github.com/PolymerElements/paper-scroll-header-panel/blob/master/paper-scroll-header-panel.html ）的來源，則會看到您在'--paper-scroll-header-panel-full-header'中輸入的樣式值將應用於#headerBg（第127行）。

因此，您可以簡單地通過更改headerBg的樣式來更改背景圖像。 如果您正在使用Polymer Starter Kit，則可以在app.js中添加以下行：

    document.querySelector('paper-scroll-header-panel').$.headerBg.style.backgroundImage = "url(path/to/image)";

或您的情況：

    this.$.scroller.$.headerBg.style.backgroundImage = "url(path/to/image)";

Plunker演示： https ://plnkr.co/edit/gd6S7q ? p = preview