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 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
JS解析XML实例分析
Jan 30 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
详解Vue中组件的缓存
Apr 20 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 Javascript
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
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
php简单分页类实现方法
2015/02/26 PHP
降低PHP Redis内存占用
2017/03/23 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
深入理解Python装饰器
2016/07/27 Python
pandas通过loc生成新的列方法
2018/11/28 Python
python 魔法函数实例及解析
2019/09/25 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
python初步实现word2vec操作
2020/06/09 Python
python 装饰器重要在哪
2021/02/14 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
html5唤醒APP小记
2019/03/27 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
业务员岗位职责范本
2013/12/15 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
中学教师教育感言
2014/02/21 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
质量承诺书格式
2014/05/20 职场文书
工厂见习报告范文
2014/10/31 职场文书
Python实现8种常用抽样方法
2021/06/27 Python
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers