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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
微信小程序实现下拉框功能
Jul 16 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开发微信支付的代码分享
2014/05/25 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
python的dict判断key是否存在的方法
2020/12/09 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
珍惜资源保护环境的建议书
2014/05/14 职场文书
李培根演讲稿
2014/05/22 职场文书
小学安全汇报材料
2014/08/14 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
前台岗位职责
2015/02/13 职场文书
竞聘书的秘诀
2019/04/02 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python