Question

我正在使用霓虹动画页面，我想看看是否在其中一个子元素上设置了属性。根据我的理解，您可以添加您想要的任何属性，如果它在标记中，如果它没有设置值明确，它将解析为true。例如：

<neon-animation-pages id="pages">
    <div awesome>This one is awesome</div>
    <div>This one is not</div>
    <div>This one is not</div>
</neon-animation-pages>

上面我创建了自己的属性：awesome

在我的代码中我使用了这个：

_onIronSelect: function(){
    console.log(this.$.pages.selectedItem.getAttribute('awesome'));
}

控制台只会吐出'null'或''，具体取决于它是否具有我的awesome属性。我可以让它工作，但我认为它应该解析为真或假，布尔？

在文档中找到了这个

根据属性的存在设置布尔属性：if 该属性完全存在，该属性设置为true，无论如何属性值。如果该属性不存在，则属性获取它的默认值。

在https://www.polymer-project.org/1.0/docs/devguide/properties.html

所以我假设我应该尝试获取selectedItem属性的值＆gt;真棒。我怎么能这样做？

Answer 1

属性和属性之间存在重要差异。属性是DOM对象上的JavaScript属性。属性基本上提供了一个字符串值键/值数据库，可以从标记初始化。

您引用的Polymer文档正在谈论属性。如果Polymer元素具有awesome列在properties对象中且属性为Boolean的属性，则会将其反序列化为true或false，如上所述。

这是Polymer提供的服务，因为它是HTML元素的常见模式。例如，如果您在HTML元素上设置了id 属性，则浏览器会自动将反映到id属性。但是，如果添加该元素不知道的泛型属性（如awesome），则该属性不会反映为属性。

如果要测试任何元素（标准HTML或聚合物）上是否存在属性，请使用hasAttribute作为@günter-zöchbauer说。根据MDN，当所有属性不存在时，所有现代浏览器中的getAttribute都会返回null，但显然这并非总是如此，因此hasAttribute可能更安全，也更清晰。 / p>

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

Answer 2

也许你想要

this.$.pages.selectedItem.hasAttribute('awesome')

Polymer从元素中获取属性

2 个答案: