聚合物添加樣式動態

在聚合物控制，「我網」，我想通過下面的代碼添加樣式：聚合物添加樣式動態

var styleElement = document.createElement('style', 'custom-style'); 
styleElement.innerHTML = cssText; 
Polymer.StyleDefaults.addStyle(styleElement);

這裏，cssText可以是字符串像

.oc-col-id-0{ 
    flex-basis: var(--oc-col-id-0-flex-basis); 
    -webkit-flex-basis: var(--oc-col-id-0-flex-basis); 
} 
.oc-col-id-1{ 
     flex-basis: var(--oc-col-id-1-flex-basis); 
     -webkit-flex-basis: var(--oc-col-id-1-flex-basis); 
}

沒有這個自定義變量，我可以

this.$.gridContainer.appendChild(styleElement);

追加styleElement但是但是，由於有自定義變量，我不知道如何解決這個問題。

的元件連接後，我不能在樣式變量不應用於元素來改變通過

this.customStyle['--oc-col-id-0-flex-basis'] = maxWidth + "px"; 
this.updateStyles();

它看起來--oc-COL-ID-0-FLEX-基礎值。

我不確定是否有任何方法動態添加/修改元素的樣式。我不確定我是否在正確的軌道上。

來源

2016-07-18 Emma

什麼問題？ –

我已更新帖子。 – Emma

你是否初始化了你的自定義變量的值？如果沒有，可以在初始化一次後嘗試 – a1626

這就是我最後動態注入風格類的過程。它迄今解決了我的問題。

  var style = this._styles[0]; 
      var text = style.textContent; 
      var cssText = ""; 
      for (var id of ids) 
      { 
       var classStyle = ".col-id-" + id; 

       var variableProperty = "--col-id-" + id + "-flex-basis"; 
       if (text.indexOf(classStyle) == -1) 
       { 
        cssText += classStyle + "{ flex-basis: var(" + variableProperty + ", auto); -webkit-flex-basis: var(" + variableProperty + ", auto);} "; 
       } 

       if (this._ownStylePropertyNames.indexOf(variableProperty) == -1) 
       { 
        this._ownStylePropertyNames.push(variableProperty); 
       } 
      } 

      if (cssText.length > 0) 
      { 
       style.textContent += " " + cssText; 
       style.__cssRules = null; //trick for rulesForStyle method in Polymer.html     
      }

來源

2016-07-27 06:10:11 Emma

聚合物添加樣式動態

回答

相關問題