JS实现隐藏同级元素后只显示JS文件内容的方法


Posted in Javascript onSeptember 04, 2016

本文实例讲述了JS实现隐藏同级元素后只显示JS文件内容的方法。分享给大家供大家参考,具体如下:

这里的demo.html文件在打开后会短暂显示与js文件同级的元素后马上隐藏这些元素,并显示同级的demo.js文件内容。具体代码如下:

demo.html:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>头部信息</p>
<div>
 <p>阅谁问君诵水落</p>
 <p>阅谁问君<p>阅谁问君诵水落</p>
 <p>阅谁问君诵水落</p><p>阅谁问君诵水落诵水落</p>
 <p>阅谁问君<p>阅谁问君诵水落</p><p>阅谁问君诵水落</p><p>阅谁问君诵水落</p><p>诵水落</p>
 <p>阅谁问君诵水落</p>
 <p>阅谁问君诵水落<p>阅谁问君诵水落</p><p>阅谁问君诵水落</p>
 <script type="text/javascript" src="demo.js"></script>
 <p>阅谁问君诵水落</p>
 <p>阅谁问君诵水落</p>
 <p>阅谁问君诵水落</p>
 <p>阅谁问君诵水落</p>
 <p>阅谁问君诵水落<p>阅谁问君诵水落</p><p>阅谁问君诵水落</p>
</div>
<p>备案信息</p>
</body>
</html>

demo.js:

document.writeln("<div id=\"contSonOnly\">");
document.writeln("<p>内容内容内容内容内容内容内容内容内容</p>");
document.writeln("</div>");
window.onload=function(){
 var contSonOnly=document.getElementById("contSonOnly");
 var contParent=contSonOnly.parentNode;
 var contSonList=contParent.children;
 for(var i=0;i<contSonList.length;i++){
  if(contSonList[i]!=contSonOnly){
   contSonList[i].style.display="none";
  }
 }
}

效果图如下:

JS实现隐藏同级元素后只显示JS文件内容的方法

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Tips 带三角可关闭的文字提示
Oct 06 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
微信小程序签到功能
Oct 31 Javascript
layui实现数据分页功能
Jul 27 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
vue实现井字棋游戏
Sep 29 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 #Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 #Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 #Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 #Javascript
jQuery实现的自动加载页面功能示例
Sep 04 #Javascript
jQuery简单实现中间浮窗效果
Sep 04 #Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 #Javascript
You might like
利用PHP创建动态图像
2006/10/09 PHP
PHP输入流php://input介绍
2012/09/18 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
arguments对象
2006/11/20 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
探究Python中isalnum()方法的使用
2015/05/18 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
九年级数学教学反思
2014/02/02 职场文书
结婚周年感言
2014/02/24 职场文书
大学应届生的自我评价
2014/03/06 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
单身申明具结书
2015/02/26 职场文书
党小组意见范文
2015/06/08 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript