document.querySelector() 返回 null
2014-08-03
27838
我正在创建一个聚合物元素。我已经制作了模板,现在正在编写脚本。出于某种原因,document.querySelector 对类和 id 选择器都返回 null。不确定这是否不适用于聚合物(没有理由它不应该)或者我没有导入某些东西或者其他什么问题。
event-card.html
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="event-card-description.html">
<polymer-element name="event-card" attributes="header image description">
<template>
<style>
.card-header {
display: block;
position: static;
font-size: 1.2rem;
font-weight: 300;
width: 300px;
height: 300px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
overflow: hidden;
}
event-card-description {
margin: 0;
position: relative;
top: 225px;
}
</style>
<div
style="background: url(../images/{{image}}.jpg) no-repeat; background-size: cover"
class="card-header" layout horizontal center
on-mouseover='{{onHovered}}'
on-mouseout='{{onUnhovered}}'>
<event-card-description
id="description"
header={{header}}
description={{description}}>
</event-card-description>
</div>
</template>
<script>
Polymer('event-card', {
onHovered: function() {
var elem = document.querySelector("#description");
console.log(elem);
}
});
</script>
</polymer-element>
2个回答
<event-card-description id="description">
位于元素的影子 dom 中。
document.querySelector("#description")
正在
主文档
中查找带有
id#description
的节点。预计找不到该节点,因为影子 dom 边界将其隐藏。尝试:
this.shadowRoot.querySelector("#description");
但是,Polymer 有一个很棒的功能,其中具有 id 的静态元素被映射到
this.$.<id>
。您可以使用
this.$.description
来获取该元素。
ebidel
2014-08-03
对于属性中的多个值,请使用
~
符号,
例如
var elem = document.querySelector("[attributes~=description]");
或者,如果您只想将其用于元素
polymer-element
,请使用:
var elem = document.querySelector("polymer-element[attributes~=description]");
31113
2019-01-10