使用腳本隱藏DIV ID

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

我的問題是我怎麼能隱藏DIV ID = 「inst4」使用<「SCRIPT>？

我試過每另一個堆棧溢出後如下：

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')";

有什麼想法？

來源

2016-08-22 Joey

JavaScript開發者控制檯中的錯誤是什麼？我的猜測是你在渲染之前引用元素。 – epascarello

[顯示/隱藏'div'使用JavaScript]可能的副本（http://stackoverflow.com/questions/21070101/show-hide-div-using-javascript） –

嘗試將此腳本添加到頁面的頁腳中。當頁面中不存在該元素時，可能會嘗試訪問它。您也可以通過檢查元素的長度來測試它。此外，使用可見性隱藏或顯示none只會使元素不可見，並且不會將其從頁面中刪除。 – Vatsal

有幾種方法可以處理您的腳本需要訪問頁面上尚未加載的元素。

作爲其中一條建議，您可以將腳本移動到網頁的底部，就在結束標記之前。這可能不是您的情況，但可能會導致腳本更改的元素在頁面加載時可能暫時可見。該腳本也需要包含在html body code中，最好的做法是保持它的獨立性。
您可以使用DOMContentLoaded事件。它在頁面準備就緒時觸發文檔（已經構建了DOM層次結構）。 DOMContentLoaded將等待外部腳本，並在所有內聯腳本執行後觸發。在此事件發生後，您應該能夠訪問並隱藏div ID。
當所有文件和資源（如圖像）加載完成時，將執行window.onload。在你的情況下可能沒有必要等待這個事件，因爲DOM樹將在DOMContentLoaded事件後完成加載

來源

2016-08-23 01:10:31 Jinw

我試着在底部添加腳本，它沒有改變任何東西。我用[javascript。info]（http://javascript.info/tutorial/onload-ondomcontentloaded#the-alternative-to-domcontentloaded）作爲DOMContentLoaded和window.onload的參考，因爲我以前從未使用過它們，並且得到以下錯誤： 'index.php：107 Uncaught ReferenceError：ready is not defined' 'index.php：107 Uncaught TypeError：無法設置屬性'onload'未定義' 我想知道是否因爲「inst4」默認加載，我無法刪除它。 – Joey

我今天發現Moodle的功能與標準網站不同（第一次使用它）。因此，我無法實現我期待的目標。儘管謝謝大家的意見！

來源

2016-08-23 21:29:06 Joey

使用腳本隱藏DIV ID

回答

相關問題