Javascript document.querySelector()返回null
我正在创造一种聚合物元素。我已经制作了模板,现在正在编写脚本。由于某些原因,document.querySelector为类选择器和id选择器都返回null。不确定这是否对聚合物不起作用(没有理由不起作用),或者我没有进口什么东西,或者还有什么问题 event-card.htmlJavascript document.querySelector()返回null,javascript,html,polymer,shadow-dom,Javascript,Html,Polymer,Shadow Dom,我正在创造一种聚合物元素。我已经制作了模板,现在正在编写脚本。由于某些原因,document.querySelector为类选择器和id选择器都返回null。不确定这是否对聚合物不起作用(没有理由不起作用),或者我没有进口什么东西,或者还有什么问题 event-card.html <link rel="import" href="../components/polymer/polymer.html"> <link rel="import" href="event-card-de
<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>
.卡头{
显示:块;
位置:静态;
字号:1.2rem;
字体大小:300;
宽度:300px;
高度:300px;
边界半径:50%;
-webkit边界半径:50%;
-moz边界半径:50%;
溢出:隐藏;
}
事件卡描述{
保证金:0;
位置:相对位置;
顶部:225px;
}
聚合物(“事件卡”{
onHovered:function(){
var elem=document.querySelector(“描述”);
控制台日志(elem);
}
});
位于元素的阴影dom中<代码>文档。查询选择器(“描述”)正在主文档中查找id为description
的节点。由于阴影dom边界将其隐藏,因此预期找不到该节点。尝试:
this.shadowRoot.querySelector("#description");
然而,Polymer有一个很棒的特性,它将具有ID的静态元素映射到
this.$。
。您可以使用this.$.description
获取该元素。对于属性中的多值,请使用~
符号,例如
var elem = document.querySelector("[attributes~=description]");
或者,如果您只想将其用于元件聚合物元件
使用:
var elem = document.querySelector("polymer-element[attributes~=description]");
哇,埃里克·拜德曼!谢谢你,埃里克!继续努力!