使用脚本隐藏DIV ID
Hide DIV ID using Script
新用户，长期研究
我的地区使用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" ?
我已经尝试了以下每个堆栈溢出的帖子:
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')";
任何想法吗?
有几种方法可以处理需要访问页面上尚未加载的元素的脚本。
- 正如其中一个评论所建议的，你可以把你的脚本移动到网页的底部，就在结束标签之前。在您的情况下，这可能不是问题，但可能导致脚本更改的元素在页面加载时可能暂时可见。该脚本还需要包含在html正文代码中，最佳做法是将其分开。你可以使用DOMContentLoaded事件。当页面准备好(DOM层次结构已经构造好)时，它就会在文档上触发。DOMContentLoaded将等待外部脚本，并在所有内联脚本执行后触发。在此事件之后，您应该能够访问和隐藏div id。
- 窗口。Onload将在所有文件和资源(如图像)加载完成时执行。在您的情况下，可能没有必要等待此事件，因为DOM树将在DOMContentLoaded事件 之后完成加载。
我今天发现Moodle的功能和标准网站不一样(第一次使用它)。因此，我无法实现我想要做的事情。谢谢大家的意见!
相关文章：
- 禁用Tab键以进行具有特定Div ID的输入
- Bootstrap Typeahead不适用于某些Div Id's
- 使用 Jquery 选中基于 Div ID 和类的所有复选框
- 如何点击获得DIV ID
- 将DIV ID内的所有链接设置为返回false
- 在滚动过程中抓住Div id时，Div id为空
- 如何选择当前 DIV ID 以使用该 ID 运行 Jquery
- 将 Div ID 添加到 YouTube iFrame
- 添加/删除 CSS 类属性以尊重不基于 Div id 的类
- 如何根据 Div ID 内容隐藏/显示 DIV
- 如何在 javascript 中使用 DIV ID 对 DIV 产生悬停效果
- jQuery - 更改 Div ID 的值
- 在完整日历提示上获取 qTip2 Div ID
- JQuery 只查看一个 DIV ID 即可获取值
- 获取单击的UL LI选择框的父DIV ID
- 滚动按钮链接Div Id's
- 如何将DIV ID的值保存到数据库PHP&MySQL
- 循环遍历DIV id数组，并每隔x秒刷新这些DIVS
- 通过Javascript获取父GridView中的Div Id
- 错误地获取DIV ID
