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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
详解redux异步操作实践
Aug 15 Javascript
js实现每日签到功能
Nov 29 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 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动态创建Flash动画
2006/10/09 PHP
php include和require的区别深入解析
2013/06/17 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
Vue指令指令大全
2019/02/09 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
通过C++学习Python
2015/01/20 Python
浅谈MySQL中的触发器
2015/05/05 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
品酒会策划方案
2014/05/26 职场文书
主题党日活动总结
2014/07/08 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
小学教育见习报告
2014/10/31 职场文书
关于迟到的检讨书
2015/05/06 职场文书
新学期感想
2015/08/10 职场文书
Flask response响应的具体使用
2021/07/15 Python
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers