Question

我想用Javascript（动态）设置自定义Polymer元素的:host{}样式。我想要设置样式的属性是“行高”，它将根据用户的屏幕大小而变化（文本将始终在一行上）。

为了找到一种闷热，我使用了两种不同的方法：
第一个是正常的jquery：

   <dom-module is="custom-element">
        <template>
            <style>
                :host {
                    position: relative;
                    display: inline-block;
                    min-width: 5.15em;
                    min-height: 2em;
                    padding: 0.5em;
                    background: transparent;
                    font-size: 1.3em;
                    outline: none;
                    cursor: pointer;
                    color: #ABCFCA;
                    text-transform: uppercase;
                    text-align: center;
                    overflow: hidden;
                }
            </style>
            <content></content>
        </template>
        <script>
            Polymer({
                is: "custom-element",
                properties: {

                },
                ready: function() {
                    $(this).css("line-height", $(this).height() + "px");
                }
            });
        </script>

我尝试的第二种方法是使用Polymer的自定义css属性：

   <dom-module is="custom-element">
        <template>
            <style>
                :host {
                    position: relative;
                    display: inline-block;
                    min-width: 5.15em;
                    min-height: 2em;
                    padding: 0.5em;
                    background: transparent;
                    font-size: 1.3em;
                    outline: none;
                    cursor: pointer;
                    color: #ABCFCA;
                    text-transform: uppercase;
                    text-align: center;
                    overflow: hidden;
                    line-height: --dynamic-line-height;
                }
            </style>
            <content></content>
        </template>
        <script>
            Polymer({
                is: "custom-element",
                properties: {

                },
                ready: function() {
                    this.customStyle['--dynamic-line-height'] = $(this).height();
                    this.updateStyles();
                }
            });
        </script>

在使用Chrome的Element Inspector检查元素时，在第一个方法（普通jquery）中，甚至没有添加/设置line-height属性，并且文本保持默认的垂直位置

第二种方法最终与第一种方法相同（元素样式没有变化/结果）

应该注意console.log($(this).height());产生32px的预期结果（在我的屏幕上）

如果有人可以帮助我修复/编辑我现有的任何方法，或者为我提供他们已经使用/记录在某处的方法，那将是非常棒的。

谢谢。

Answer 1

第二个示例中的CSS仅使用CSS变量，但不会声明一个。首先声明一个像：

        <style>
            :host {
                --dynamic-line-height: 1px;
                ....
                line-height: var(--dynamic-line-height);
            }
        </style>

         ...

           ready: function() {
                var height = Polymer.dom(this).node.offsetHeight + 'px';
                this.customStyle['--dynamic-line-height'] = height;
                this.updateStyles();
            }

Plunker example

另见Changing CSS variables via JS in Polymer

样式：使用Javascript进行Polymer Element的主机

1 个答案: