访问聚合物中的DOM [英] access DOM in polymer
本文介绍了访问聚合物中的DOM的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想要实现:
-
突出显示p元素中的某些文本
highlight some text in p element
(不添加/删除)纸张标志当值为0
(not add/ or remove) paper-badge when value is 0
根据数字更改纸张徽章颜色
change paper-badge color depending on number
要玩的示例模块:
<link rel="import" href="https://polygit2.appspot.com/components/polymer/polymer.html">
<link rel="import" href="https://polygit2.appspot.com/components/iron-icons/communication-icons.html">
<link rel="import" href="https://polygit2.appspot.com/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="https://polygit2.appspot.com/components/paper-badge/paper-badge.html">
<dom-module id="question-one">
<template>
<template is="dom-repeat" items="{{numbers}}">
<p>color one of my letters</p>
<paper-icon-button id="someid{{index}}" icon="communication:email"></paper-icon-button>
<paper-badge for="someid{{index}}" label="{{item}}"> </paper-badge>
</template>
</template>
<script>
Polymer({
is: "question-one",
properties: {
numbers: {
type: Array,
value: function () {
return [0, 1, 2, 0, 4, 5, 0, 7, 8, 0]
}
}
}
}); </script>
</dom-module>
和用法:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://polygit2.appspot.com/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="questions//question-one.html" />
</head>
<body>
<question-one></question-one>
</body>
</html>
推荐答案
添加 code>属性
Add an id
attribute
<p id="someId">
使用 $
地图获取参考元素
this.$.someId.innerText...
此。$
不适用于模板中动态添加的HTML或HTML is =dom-if或
template is =dom-repeat或类似的。
this.$
doesn't work for dynamically added HTML or HTML inside template is="dom-if" or
template is="dom-repeat" or similar.
对于这种情况,您可以使用 this。$$(selector)
其中所有CSS选择器都支持,而$ code>这个$ ... 只支持 id
(不含#
)
For such cases you can use this.$$(selector)
where all CSS selectors are supported, while this.$...
only supports id
(without #
)
这篇关于访问聚合物中的DOM的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文