使用Javascript和polymer将display none更改为block

如何使用JavaScript/Polymer将显示从

none

更改为

block

我尝试了很多东西，但我不明白为什么它不起作用

我当前的代码：

#标题{
高度：50px；
背景色：#D8434A；
左边距：-8px；
利润上限：-8px；
边缘底部：9px；
底部边框：2件纯白；
}
#收割台img{
边缘顶部：2倍；
左边距：10px；
宽度：218px；
高度：46px；
}
#导航栏{
背景色：#D8434A；
宽度：214px；
身高：100%；
位置：固定；
左边距：-8px；
利润上限：-8px；
}
#纳瓦尔{
左边距：-40px；
利润上限：-33px；
}
#纳瓦尔里酒店{
显示：绝对；
宽度：200px；
高度：40px；
边缘顶部：6px；
填充顶部：8px；
}
#navbar ul li a{
文字装饰：无；
显示：块；
背景色：白色；
颜色：白色；
位置：绝对位置；
宽度：200；
背景色：#D8434A；
文本对齐：左对齐；
左侧填充：10px；
底部边框：2件纯白；
右边框：4倍纯色橙色；
线高：50px；
}
#导航栏ul li a：悬停{
背景色：#FFFA75；
}
#navbar ul li img{
高度：30px；
宽度：30px；
右边距：10px；
边缘底部：-9px；
}
#输入字段标签{
位置：相对位置；
左：500px；
顶部：100px；
}
#输入字段纸张输入{
位置：相对位置；
左：520像素；
顶部：90px；
}
#输入字段纸张按钮{
位置：相对位置；
左：550px；
顶部：90px；
}
#输入字段h1{
位置：相对位置；
左：635px；
顶部：50px；
}
#输入字段2{
显示：无；
}
#输入字段2标签{
位置：相对位置；
左：500px；
顶部：100px；
}
#输入字段2纸张输入{
位置：相对位置；
左：520像素；
顶部：90px；
}
#input-field2纸张按钮{
位置：相对位置；
左：550px；
顶部：90px；
}





阿弗雷克南
塔费尔努默：
贝夫斯蒂根
Betaalmethode：
孔唐
别针
聚合物({
是：'导航元素'，
贝夫斯蒂根：函数（）{
if（document.getElementById（“input-field2”）.style.display==“block”）
{
document.getElementById（'input-field2'）。style.display='none'；
}
其他的
{
document.getElementById（'input-field2'）。style.display='block'；
}
}
});
类NavigatieElement扩展了Polymer.Element{
静态get是（）{return'navigatie element'；}
}
window.customElements.define（NavigatieElement.is，NavigatieElement）；

如果我添加

警报（“测试”）例如，在脚本标记中，它运行良好，因此按钮没有问题

问题是我添加到其中的JavaScript

我想在单击bevestigen后显示
div


它应该从
block
更改为
none
您应该了解阴影DOM的概念，例如在Polymer站点上

这里需要注意的重要一点是，您在名为
导航元素
的元素中，不能使用
文档
作为“范围”来查询中的元素（或者实际上可以，但您将在顶级文档中进行查询，而不是在元素中）

据我所知，您对本地阴影DOM感兴趣，因此可以尝试替换

if (document.getElementById("input-field2").style.display == "block") 
{
  document.getElementById('input-field2').style.display = 'none';
}
else 
{
  document.getElementById('input-field2').style.display = 'block';
}

与：

是否检查了
if（document.getElementById（“input-field2”）.style.display==“block”）
条件是否正在评估？也许可以在块内尝试
console.log（“…”）
。我不确定您是否理解。显示属性可能没有更改为
none
，因为if语句的计算结果可能不是true。因此，执行else语句并将属性值重新设置为
block
。请尝试检查该条件是否为真。谢谢您的帮助。我在控制台中遇到了一个错误：uncaughttypeerror:HTMLElement.bevstigen（navigatie element.html:151）处的HTMLElement.handler（template stamp.html:92）处无法读取null属性“style”可能是JavaScript试图在DOM完全初始化之前执行。我个人会使用jQuery并将您的JS代码包装在
$（document）.ready（）中。如果您必须使用vanilla js，请尝试
window.onload=function（）{}
。非常感谢！这正是我想要的。谢谢@不客气，我很高兴这有帮助。。祝你的聚合物“旅程”好运：
if (this.shadowRoot.getElementById("input-field2").style.display == "block") 
{
  this.shadowRoot.getElementById('input-field2').style.display = 'none';
}
else 
{
  this.shadowRoot.getElementById('input-field2').style.display = 'block';
}