我在我的页面中以以下方式使用了paper-icon-button:
<template is="dom-bind" id="t">
<paper-icon-button id="back" icon="arrow-back" style="display:{{displayArrow}}" alt="arrow-back" title="arrow-back" on-click="onBackPress"></paper-icon-button>
</template>现在，我想要Java脚本改变显示值为'none'或'block'在某些条件下。
我的java脚本是:<script>
var template = document.querySelector('#t');
template.displayArrow='none';
</script>这似乎不工作，作为模板。displayArrow未定义。请建议
最后的代码是这样的:
<!doctype html>
<html>
<head>
<title>Test Home</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<style>
</style>
</head>
<body>
<template is="dom-bind" id="t">
<paper-toolbar id="header">
<paper-icon-button id="b" icon="arrow-back" style="display:{{displayArrow}}" alt="arrow-back" title="arrow-back" on-click="onBackPress"></paper-icon-button>
<h3>TestPage</h3>
</paper-toolbar>
</template>
<script>
var template = document.querySelector('#t');
template.displayArrow='none'
</script>
</body>
</html>displayArrow为变量
下面的代码段将为您工作
/* To hide the element */
document.getElementById("back").style.display = "none";
/* To show the element */
document.getElementById("back").style.display = "block";