Question

在聚合物控件中，我的网格＆＃39;，我试图通过以下代码添加样式：

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);
}

如果没有这个自定义变量，我可以通过

附加styleElement

this.$.gridContainer.appendChild(styleElement);

但是，由于存在自定义变量，我不确定如何解决此问题。

附加元素后，我无法通过

更改--oc-col-id-0-flex-basis值

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

看起来样式变量未应用于元素。

我不确定是否有任何方法可以动态添加/修改元素的样式。我不确定我是否走在正确的轨道上。

Answer 1

这是我最终动态注入样式类的方法。它到目前为止解决了我的问题。

            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                   
            }

Polymer动态添加样式

1 个答案: