Using Javascript to dynamically update custom CSS properties

Question

Using Javascript to dynamically update custom CSS properties

I am currently utilizing the paper-scroll-header-panel along with a custom CSS property

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

in order to customize the full-sized header. However, I am facing an issue where the header image in this custom component needs to change based on the image URL provided by the loading page. I have defined a property and attempted to assign it through a computed property, but my approach does not seem to be effective. This is what I have tried.

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

and within the JavaScript:

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 + ');};';
    },

Unfortunately, this method does not work as intended. How can I implement a varying background-image for different instances of a component while using a custom CSS component?

Update: The current code is displayed below. Nonetheless, it is still not functioning correctly.

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

javascript css polymer polymer-1.0

Answer 1

Answer №1

Custom CSS properties cannot be modified in the style attribute because it is only processed during the element's initialization. To make changes, you need to apply them within the customStyle property of the element and then use the updateStyles method.

Original Source: https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-api

Answer 2

Custom CSS properties cannot be modified in the style attribute because it is only processed during the element's initialization. To make changes, you need to apply them within the customStyle property of the element and then use the updateStyles method.

Original Source: https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-api

Answer 3

Answer №2

@Neil is absolutely correct. The

--paper-scroll-header-panel-full-header

is a CSS variable that can be manipulated. I have created a small example to demonstrate how it can be done: Here is the link.

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

Your code is almost there. The issue lies in the fact that your style changing code is never triggered because the value is not changed. If you incorporate a button or any other element to change it, the code will work as intended. Here is your modified code: Link to modified code

Answer 4

@Neil is absolutely correct. The

--paper-scroll-header-panel-full-header

is a CSS variable that can be manipulated. I have created a small example to demonstrate how it can be done: Here is the link.

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

Your code is almost there. The issue lies in the fact that your style changing code is never triggered because the value is not changed. If you incorporate a button or any other element to change it, the code will work as intended. Here is your modified code: Link to modified code

Answer 5

Answer №3

If you take a look at the code source for paper-scroll-header-panel(https://github.com/PolymerElements/paper-scroll-header-panel/blob/master/paper-scroll-header-panel.html), you will notice that the style values specified in '--paper-scroll-header-panel-full-header' are applied to #headerBg (line 127).

This means that changing the background image can easily be done by adjusting headerBg's style. For those using the Polymer Starter Kit, simply add this line in your app.js:

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

Alternatively, in your specific scenario:

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

Check out the Plunker Demo here: https://plnkr.co/edit/gd6S7q?p=preview

Answer 6

If you take a look at the code source for paper-scroll-header-panel(https://github.com/PolymerElements/paper-scroll-header-panel/blob/master/paper-scroll-header-panel.html), you will notice that the style values specified in '--paper-scroll-header-panel-full-header' are applied to #headerBg (line 127).

This means that changing the background image can easily be done by adjusting headerBg's style. For those using the Polymer Starter Kit, simply add this line in your app.js:

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

Alternatively, in your specific scenario:

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

Check out the Plunker Demo here: https://plnkr.co/edit/gd6S7q?p=preview

Using Javascript to dynamically update custom CSS properties

Unfortunately, this method does not work as intended. How can I implement a varying background-image for different instances of a component while using a custom CSS component?

Answer №1

Answer №2

Answer №3

Similar questions

Personalized Icons for Google Maps. (Designed for iPhone)

Error with react/display-name in ESLint when using dynamic imports in Next.js

From mongoose to swagger: "<field>" validation error - BSONTypeError: The argument provided must be a string containing either 12 bytes or 24 hexadecimal characters

Creating manageable CSS styles for a wide variety of themes

Enhancing User Experience with Real-Time Control Updates using ASP.Net and Bootstrap

What is the best method for storing a list of present and absent students in a database to effectively manage attendance records?

By utilizing the "order" property, I can arrange divs to start at the bottom and ascend as additional elements are added

What is the best way to establish a shared file for a constant that can be utilized by both JavaScript and C/C++

Tips for organizing and centering Kendo radio buttons within a Bootstrap grid and form structure

Encountered an issue while trying to update a ServiceWorker for scope - Received a HTTP error

Highcharts facing issues with data rendering

UVs on a single object in my Three.js project are completely messed up

Using the ESNEXT, Gutenberg provides a way to incorporate repeater blocks that

A comprehensive guide on effectively monitoring Form Abandonment in Google Analytics using jQuery or JavaScript

Adjust the panel size accordingly for smaller screens

The jQuery plugin qTip does not display the tooltip

Node.js variable initialization

Struggling to grasp the concept of using z-index in CSS

ng-show directive in AngularJS is not functioning properly when utilized with CLI

Transmitting a multidimensional array in JavaScript to an AjaxPro method on a front-end webpage: A step-by-step guide