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 相关文章推荐
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 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/06/25 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
基于jquery实现轮播特效
2016/04/22 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python实现名片管理系统
2018/11/29 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
学生打架检讨书大全
2014/01/23 职场文书
学生鉴定评语大全
2014/05/05 职场文书
质量提升方案
2014/06/16 职场文书
设计师求职信
2014/07/01 职场文书
催款通知书范文
2015/04/17 职场文书
企业培训简报范文
2015/07/20 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
python如何为list实现find方法
2022/05/30 Python
基于Python实现西西成语接龙小助手
2022/08/05 Golang