更新（约1小时后）

Question

我对聚合物中的自定义元素有疑问。

我有一个acustom元素，它的样式嵌套在它的模板中，对于模板中的div，如下所示：

  <template>
    <style>    
       #navWrapper{
          height: auto;;
          color:red;
          position:fixed;
          background-color:black;
          width: 100%;
       }
    </style>
  <div id="navWrapper"><content></content></div>
</template>

现在，当我向下滚动页面时，我想改变navWrapper的颜色。我想使用jquery。因此，我的自定义元素中有一个脚本，如下所示：

<script>
Polymer('responsive-nav',{ready: function() {
$(window).scroll (function () {
        var sT = $(this).scrollTop();
            if (sT >= 100) {    
                $(this.$.navWrapper).css({backgroundColor : 'rgba(0,0,0,0.0)' })
            }else {
                ...
            }
    })

     } });
</script>

现在可悲的是，什么也没做。我在$（这个。$。navWrapper）之前发出警告（测试），以确定我是否达到了这一点，而且我做到了。此外，当我想要改变生活在我的普通HTML文件中的元素的背景颜色或其他东西时，它可以工作。例如$（＆＃34; #testDiv＆＃34;）。css（{...}）更改。所以我的问题是：如何正确访问我的元素的CSS？

Answer 1

看起来你的JQuery CSS调用是错误的。

我认为应该是：

.css("background-color", "rgba(0,0,0,0.0)")

而不是

.css({backgroundColor : 'rgba(0,0,0,0.0)' })

交叉引用您使用JQuery文档所做的事情，您肯定错过了'background'来自'backgroundColor'，但我也没有在文档中看到任何声明使用JSON对象来制作变化

然而，您可以使用属性名称和值的数组（这是我怀疑您可能尝试过的）

更新（约1小时后）

因为我今天正在努力解决一个不太相似的问题（但涉及bootstrap而不是jquery）我已经在调查类似概念的事情了。

结果，我拿了OP的原始代码并开始玩它。

我在下面介绍的是部分JQuery解决方案（我们仍然使用JQ的滚动检测），其中我还找到了使用聚合条件绑定语法更改样式的替代方法。

http://www.polymer-project.org/docs/polymer/expressions.html

基本上我所做的是在设置时将用户数据对象传递给滚动事件。

此用户对象包含一个反映当前聚合物对象的属性（这是必需的，以便JQ处理程序在触发时可以更新聚合物属性）

当窗口滚动事件发生时，处理程序提取此属性，然后使用它来获取聚合物元素内的局部变量，从而使用当前滚动顶值更新它。

由于局部范围属性是实际聚合物对象的一部分，任何聚合物数据绑定都可以读取它，此时它只是创建几个样式的问题，然后使用表达式绑定来选择正确的样式

请记住，样式级联，因此您可以轻松地为整个事物制作一个主样式，然后只需根据需要更改背景颜色的两种样式。

表达式绑定通过使用左侧的文本起作用：仅当右侧的表达式求值为true时才会生成，例如：

{{ {frogs: a == 1} }}

将表达式绑定替换为''如果属性'a'不等于1并将其设置为'frogs'，如果属性'a'等于1。

然而，表达式结合本质上是单一的，因此为了具有多于1个表达式结合，您需要通过一个聚合物过滤器传递整个事物，特别是 'tokenList' < / strong>过滤。

一旦你这样做，你可以建立一个不同检查的整个对象，所以扩展我们前面的例子：

{{ {frogs: a == 1, tadpoles: a == 2} | tokenList }}

现在将使结果等于''如果属性'a'不等于1且不等于2，同时将结果设置为'frogs'如果属性'a'等于1，并且如果属性'a'等于2，则将结果设置为'tadpoles'。 / p>
你可以将它扩展到你喜欢的任意数量的支票，但你在中添加的越多（我猜不管怎样 - 我没有测试过它）可能性能较慢。

现在，下面的代码将完全符合您的需求，一旦您进行了一些更改，以便它针对您自己的元素并设置自己的样式： - ）

<link rel="import" href="polymer.html"> <polymer-element name="x-mypolymercomponent"> <template> <style> .under100 { background-color: green; } .over100 { background-color: red; } </style> <h1 class="{{ {under100: scroll_top <= 100, over100: scroll_top > 100} | tokenList }}">This header has a dynamic class</h1> </template> <script> Polymer('x-mypolymercomponent', { ready: function () { $(window).scroll({scope: this}, function(event) { var sT = $(this).scrollTop(); event.data.scope.scroll_top = sT; }) }, scroll_top: 0, }); </script> </polymer-element>

我刚刚在我正在研究的.NET项目中对此进行了测试，并且它在chrome 36中工作正常，但Firefox中仍然存在问题，但我认为这可能是由于我上次发现的一个错误晚上所以我不会太担心它。

我也在页面级别加载了JQuery，因此看起来该组件可以很好地从中获取页面事件。

尝试一下，看看你从哪里开始，我即将针对我的具体问题进行调整，然后将其转换为打字稿模块： - ）

Polymer更改自定义元素

1 个答案:

更新（约1小时后）