有条件地使用Javascript更改列表项目属性

我是一名超级初学者，所以如果这是非常基本的原则，但我有几个小时寻找解决方案，无法弄清楚我做错了什么。基本上，如果满足特定条件，我想隐藏由id =“change”项标识的单个列表项。然而，它似乎并没有像下面的JavaScript代码做什么，因为“隐藏我”列表项继续出现。有条件地使用Javascript更改列表项目属性

<script> 
     var x = 1; 
     if(x == 1) { 
     document.getElementById("change").style.display = "none"; 
     } 
</script> 


<style> 
    .default{display: block;} 
</style> 

<ul> 
    <li class="default">Show Me</li> 
    <li id="change" class="default">Hide Me</li> 
</ul>

来源

2017-07-03 bdn711

将代码写入StackSnippet时，代码将按预期工作; '隐藏我'隐藏起来，'显示我'仍然可见。也许你没有正确引用你的JavaScript文件？或者，您是否已经在HTML文件的**内部编写了JavaScript **，如上所示？因为在这种情况下，元素不会在您尝试定位它时创建;） –

您的代码（如图所示）不起作用，因为脚本块在该元素位于DOM中之前正在运行，因此'document.getElementById（“change”）''为'' - 检查浏览器** developer **工具控制台，你会看到一个指向该行的错误，关于null的东西没有属性风格...尝试在'

...'块之后移动'

将<script>移到底部，它应该工作。原因是，您正在尝试操作尚未呈现的DOM元素。

这是标准的做法，包括在<body>页面底部的所有脚本/脚本文件来避免此问题：调试代码是尝试和看到的错误开始的地方

<body> 
    <style> 
     .default{display: block;} 
    </style> 

    <ul> 
     <li class="default">Show Me</li> 
     <li id="change" class="default">Hide Me</li> 
    </ul> 

    <script> 
     var x = 1; 
     if(x == 1) { 
      document.getElementById("change").style.display = "none"; 
     } 
    </script> 
</body>

来源

2017-07-03 23:07:16 FuriousD

有条件地使用Javascript更改列表项目属性

相关问题