聚合物添加样式动态

在聚合物控制，“我网”，我想通过下面的代码添加样式：聚合物添加样式动态

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

聚合物添加样式动态

回答

相关问题