javascript - 使用脚本隐藏 DIV ID

Question

新用户，长期研究员。

我的地区使用 Moodle，我正在设置我的网页。然而，Moodle 并不喜欢所有 HTML、CSS 或 JAVA 代码。因此，我需要将它散列在一起。默认情况下，Moodle 有一个 DIV ID="inst4"

<div id="inst4" class="block_navigation  block" role="navigation" data-block="navigation" data-instanceid="4" aria-labelledby="instance-4-header" data-dockable="1">
    <div class="header" id="yui_3_17_2_1_1471893404838_261"><div class="title" id="yui_3_17_2_1_1471893404838_177">
        <div class="block_action">
            <img class="block-hider-hide" alt="Hide Navigation block" src="http://moodle.tcu2905.us/theme/image.php/clean/core/1470413034/t/switch_minus" tabindex="0" title="Hide Navigation block">
            <img class="block-hider-show" alt="Show Navigation block" src="http://moodle.tcu2905.us/theme/image.php/clean/core/1470413034/t/switch_plus" tabindex="0" title="Show Navigation block">
            <input type="image" class="moveto customcommand requiresjs" alt="Move this to the dock" title="Dock Navigation block" src="http://moodle.tcu2905.us/theme/image.php/clean/core/1470413034/t/block_to_dock">
        </div>
        <h2 id="instance-4-header">Navigation</h2></div>
    </div>
    <div class="content" id="yui_3_17_2_1_1471893404838_249">
        <ul class="block_tree list" role="tree" data-ajax-loader="block_navigation/nav_loader" id="yui_3_17_2_1_1471893404838_248">
            <li class="type_unknown depth_1 contains_branch current_branch" aria-labelledby="label_1_1" tabindex="-1" id="yui_3_17_2_1_1471893404838_247">
            <p class="tree_item branch active_tree_node canexpand navigation_node" role="treeitem" aria-expanded="true" aria-owns="random57bb4f9c947b61_group" data-collapsible="false" tabindex="0" aria-selected="true" id="yui_3_17_2_1_1471893404838_255">
            <a tabindex="-1" id="label_1_1" href="http://moodle.tcu2905.us/my/">Dashboard</a></p>
            <ul id="random57bb4f9c947b61_group" role="group" tabindex="-1">
                <li class="type_setting depth_2 item_with_icon" aria-labelledby="label_2_2" tabindex="-1">
                   <p class="tree_item hasicon" role="treeitem" tabindex="-1" aria-selected="false">
                        <a tabindex="-1" id="label_2_2" href="http://moodle.tcu2905.us/?redirect=0">
                        <img class="smallicon navicon" alt="" src="http://moodle.tcu2905.us/theme/image.php/clean/core/1470413034/i/navigationitem" tabindex="-1">
                        <span class="item-content-wrap" tabindex="-1">Site home</span>
                         </a>
                     </p>
                </li>
                <li class="type_course depth_2 contains_branch" aria-labelledby="label_2_3" tabindex="-1">
                    <p class="tree_item branch" role="treeitem" aria-expanded="false" aria-owns="random57bb4f9c947b63_group" tabindex="-1" aria-selected="false">
                        <span tabindex="-1" id="label_2_3" title="Tri-City United Moodle Site">Site pages</span>
                    </p>
                    <ul id="random57bb4f9c947b63_group" role="group" aria-hidden="true" tabindex="-1">
                        <li class="type_unknown depth_3 item_with_icon" aria-labelledby="label_3_5" tabindex="-1">
                            <p class="tree_item hasicon" role="treeitem" tabindex="-1" aria-selected="false">
                                <a tabindex="-1" id="label_3_5" href="http://moodle.tcu2905.us/blog/index.php">
                                <img class="smallicon navicon" alt="" src="http://moodle.tcu2905.us/theme/image.php/clean/core/1470413034/i/navigationitem" tabindex="-1">
                                <span class="item-content-wrap" tabindex="-1">Site blogs</span>
                                </a>
                            </p>
                       </li>
                       <li class="type_custom depth_3 item_with_icon" aria-labelledby="label_3_6" tabindex="-1">
                           <p class="tree_item hasicon" role="treeitem" tabindex="-1" aria-selected="false">
                               <a tabindex="-1" id="label_3_6" href="http://moodle.tcu2905.us/badges/view.php?type=1">
                                   <img class="smallicon navicon" alt="" src="http://moodle.tcu2905.us/theme/image.php/clean/core/1470413034/i/navigationitem" tabindex="-1">
                                    <span class="item-content-wrap" tabindex="-1">Site badges</span>
                                </a>
                            </p>
                       </li>
                       <li class="type_setting depth_3 item_with_icon" aria-labelledby="label_3_7" tabindex="-1">
                           <p class="tree_item hasicon" role="treeitem" tabindex="-1" aria-selected="false">
                               <a tabindex="-1" id="label_3_7" href="http://moodle.tcu2905.us/tag/search.php">
                                   <img class="smallicon navicon" alt="" src="http://moodle.tcu2905.us/theme/image.php/clean/core/1470413034/i/navigationitem" tabindex="-1">
                                    <span class="item-content-wrap" tabindex="-1">Tags</span>
                                </a>
                            </p>
                       </li>
                       <li class="type_custom depth_3 item_with_icon" aria-labelledby="label_3_8" tabindex="-1">
                           <p class="tree_item hasicon" role="treeitem" tabindex="-1" aria-selected="false">
                               <a tabindex="-1" id="label_3_8" href="http://moodle.tcu2905.us/calendar/view.php?view=month">
                                   <img class="smallicon navicon" alt="" src="http://moodle.tcu2905.us/theme/image.php/clean/core/1470413034/i/navigationitem" tabindex="-1">
                                    <span class="item-content-wrap" tabindex="-1">Calendar</span>
                                </a>
                            </p>
                        </li>
                        <li class="type_activity depth_3 item_with_icon" aria-labelledby="label_3_9" tabindex="-1">
                            <p class="tree_item hasicon" role="treeitem" tabindex="-1" aria-selected="false">
                                <a tabindex="-1" id="label_3_9" title="Forum" href="http://moodle.tcu2905.us/mod/forum/view.php?id=1">
                                    <img class="smallicon navicon" alt="Forum" title="Forum" src="http://moodle.tcu2905.us/theme/image.php/clean/forum/1470413034/icon" tabindex="-1">
                                     <span class="item-content-wrap" tabindex="-1">Site news</span>
                                 </a>
                              </p>
                        </li>
                   </ul>
              </li>

              <li class="type_system depth_2 contains_branch" aria-labelledby="label_2_10" tabindex="-1" id="yui_3_17_2_1_1471893404838_246">

                   <p class="tree_item branch" role="treeitem" id="expandable_branch_0_courses" aria-expanded="false" data-requires-ajax="true" data-loaded="false" data-node-id="expandable_branch_0_courses" data-node-key="courses" data-node-type="0" tabindex="-1" aria-selected="false">
                       <a tabindex="-1" id="label_2_10" href="http://moodle.tcu2905.us/course/index.php">Courses</a>
                   </p>
               </li>
           </ul>
       </li>
   </ul>
</div>

我的问题是如何使用 <'script> 隐藏 DIV ID="inst4"？

我已根据另一篇 Stack Overflow 帖子尝试了以下操作:

document.getElementById("inst4").style.visibility = "hidden";

但是，它并没有从网站中删除 DIV ID="inst4"。我想知道这是否真的可能，因为我知道我无法控制 DIV ID="inst4"。

我知道 <'script> 可以工作，因为我能够使用以下方式进行后台加载:

<script>document.body.style.backgroundImage = "url('http://wallpaper.zone/img/149826.jpg')";

有什么想法吗？

Answer 1

有多种方法可以处理需要访问页面上尚未加载的元素的脚本。

1. 正如评论之一所建议的，您可以将脚本移至网页底部、结束标记之前。对于您的情况来说，这可能不是问题，但可能会导致脚本更改的元素在页面加载时可能暂时可见。该脚本还需要包含在 html 正文代码中，最佳实践是将其分开。
2. 您可以使用 DOMContentLoaded 事件。当页面准备好(DOM 层次结构已构建)时，它会在文档上触发。 DOMContentLoaded 将等待外部脚本，并在所有内联脚本执行后触发。在此事件之后，您应该能够访问和隐藏 div id。
3. window.onload 将在所有文件和资源(例如图像)加载完成时执行。在您的情况下，可能没有必要等待此事件，因为 DOM 树将在 DOMContentLoaded 事件之后完成加载