使用脚本隐藏DIV ID

时间:2016-08-22 20:10:40

标签: javascript html hide

新用户,长期研究员。

我的区使用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>

我的问题是如何使用&lt;'script&gt;隐藏DIV ID =“inst4”?

我已经尝试了以下Stack Overflow帖子:

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

但是,它并没有从网站上删除DIV ID =“inst4”。我想知道它是否真的可能,知道我无法控制DIV ID =“inst4”。

我知道&lt;'脚本&gt;工作,因为我能够使用以下方式加载后台:

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

有什么想法吗?

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

我今天发现Moodle的功能与标准网站相同(第一次使用它)。因此,我无法实现我的目标。感谢大家的意见!