पॉलिमर

Question

में जेएस के माध्यम से सीएसएस चर बदलना मेरे पॉलिमर प्रोजेक्ट में, मेरे पास एक रंगीन रंग है जिसमें मैं जावास्क्रिप्ट का उपयोग करके बदलना चाहता हूं। चूंकि पॉलिमर सीएसएस वैरिएबल का उपयोग करता है - स्टाइल के लिए आंतरिक रूप से पेपर-टूलबार-पृष्ठभूमि, मैं style.color की तरह कुछ नहीं कर सकता। मुझे setProperty() नामक एक विधि मिली, लेकिन यह मेरे लिए काम नहीं करती है। क्या किसी को पहले ही समाधान मिला है?

Answer 1

मूल रूप से

,

1. ले लो तत्व
2. उपयोग customStyle संपत्ति को बदलने के लिए --paper-उपकरण पट्टी-पृष्ठभूमि
3. भागो element.updateStyles()

कृपया देखें docs । [संपादित करें] यदि आपको एक उदाहरण की आवश्यकता है, तो मेरे पास एक here है।

Answer 2

तत्व के कस्टम स्टाइल मानचित्र में परिवर्तनीय मान सेट करें, तो अद्यतन स्टाइल विधि को कॉल करें।

यहां एक तत्व का एक उदाहरण है जो परिभाषित कस्टम शैली के मूल्य को संशोधित करके अपनी दृश्यता बदलता है। चर बाहरी भी हो सकता है।

<dom-module id="my-elem"> 

    <style> 
    :host { 
     display: block; 
     --my-elem-visibility: hidden; 
    } 
    #child { 
     visibility: var(--my-elem-visibility) 
    } 
    </style> 
    <template> 
    <div id="child">Some content goes here.</div> 
    </template> 
</dom-module> 

<script> 
    Polymer({ 

     is: 'my-elem', 

     setVisible: function (visible) { 
      this.customStyle['--my-elem-visibility'] = 'visible'; 
      this.updateStyles(); 
     } 
    }); 
</script> 

Answer 3

वर्तमान Polymer.Element के लिए सीएसएस चर सेट करने के लिए:

this.updateStyles({'--paper-toolbar-background': '#ed0'}); 

विश्व स्तर पर चर सेट का उपयोग करें:

Polymer.updateStyles({'--paper-toolbar-background': '#ed0'});