js操作css属性实现div层展开关闭效果的方法


Posted in Javascript onMay 11, 2015

本文实例讲述了js操作css属性实现div层展开关闭效果的方法。分享给大家供大家参考。具体分析如下:

最近学javascript接触到js对css属性操作,就写了个展开关闭效果,同时实现了按钮文字切换,很简洁啊!这段Js对象操作css属性实现div层的展开关闭效果。将代码分享给JS前端设计者。

<title>js操作div展开关闭</title>
<style>
  #3water { border: solid 1px #EEE; 
    background:#F7F7F7; 
    margin:20px; 
    padding:10px; 
    display:none;
    width:300px;    
  }
</style>
<input style="cursor:pointer" onclick="show('3water');"
type='button' value='展开' id='inp'>
<div id="3water">三水点靠木提供编程源码、网站源码、网页素材、
书籍教程、网站模板、网页特效代码等!</div>
<script>
function show(id){
  var aiin = document.getElementById(id);
  var inp= document.getElementById('inp');
  if(aiin.style.display != 'block'){
    aiin.style.display = 'block';
    inp.value='关闭';
  }else{
    aiin.style.display = 'none';  
    inp.value='展开';
  }
}
</script>

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

Javascript 相关文章推荐
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
node.js实现端口转发
Apr 14 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
VUE递归树形实现多级列表
Jul 15 Vue.js
javascript中this的四种用法
May 11 #Javascript
JQuery插件jcarousellite的参数中文说明
May 11 #Javascript
javascript实现炫酷的拖动分页
May 11 #Javascript
JS+CSS实现的拖动分页效果实例
May 11 #Javascript
浅谈jQuery构造函数分析
May 11 #Javascript
在JavaScript中正确引用bind方法的应用
May 11 #Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 #Javascript
You might like
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
dedecms系统常用术语汇总
2007/04/03 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
python如何实现单链表的反转
2020/02/10 Python
python实现批处理文件
2020/07/28 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
Python中如何定义一个函数
2016/09/06 面试题
职工运动会邀请函
2014/01/19 职场文书
摄影助理岗位职责
2014/02/07 职场文书
世界读书日的活动方案
2014/08/20 职场文书
个人委托书范本汇总
2014/10/01 职场文书
创业计划书之酒店
2019/08/30 职场文书