Question

我在页面中使用了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>

这似乎不起作用，因为template.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>

Answer 1

displayArrow是一个变量。

以下代码段将适用于您

/* To hide the element */
document.getElementById("back").style.display = "none";

/* To show the element */
document.getElementById("back").style.display = "block";

使用javascript更改聚合物1.0中的纸图标按钮的css样式

1 个答案: