JS实现点击按钮控制Div变宽、增高及调整背景色的方法


Posted in Javascript onAugust 05, 2015

本文实例讲述了JS实现点击按钮控制Div变宽、增高及调整背景色的方法。分享给大家供大家参考。具体如下:

这里使用JavaScript实现点击按钮后改变DiV的高度、宽度和背景色等,点击对应按钮,Div调整高度、调整宽度、调整背景色等。实现方面主要是使用JS来控制点击按钮后改变CSS样式文件,这一切都是在JS的动态控制下,比如无刷新切换网页风格的实现,可以以此为基础来扩展。

运行效果如下图所示:

JS实现点击按钮控制Div变宽、增高及调整背景色的方法

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击按钮改变CSS样式</title>
<style type="text/css">
* {
  padding:0px;
  margin:0px;
}
.box {
  width:300px;
  height:300px;
  border:1px solid #CBC4F7;
  font-size:13px;
  margin:100px auto;
}
.divWidth {
  width:400px;
}
.divHeight {
  height:400px;
}
.divBgColor {
  background-color:#DCF3B1;
}
p {
  padding:15px 5px;
}
ul li {
  list-style:none;
  width:140px;
  height:32px;
  text-align:center;
  line-height:32px;
  background-color:#C4EA84;
  border:1px solid #9BEA75;
  margin:0px auto;
  margin-bottom:10px;
  cursor:pointer;
  background-image:-webkit-linear-gradient(top, #C4EA84, #53AC28);
  background-image:-moz-linear-gradient(top, #C4EA84, #53AC28);
  background-image:-o-linear-gradient(top, #C4EA84, #53AC28);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  -o-border-radius:4px;  
}
</style>
<script type="text/javascript">
window.onload=function(){ 
  var btn1 = document.getElementById("btn1");
  var btn2 = document.getElementById("btn2");
  var btn3 = document.getElementById("btn3");
  funClick = function(btnID,changeClass){
    btnID.onclick = function() {
      var boxClass = btnID.parentNode.parentNode.className;
      var ifClass = boxClass.indexOf(changeClass);
      if(ifClass < 0){
        boxClass = boxClass + " " + changeClass;
      }else {
        boxClass = boxClass.replace(changeClass,"");      
      }
      btnID.parentNode.parentNode.className = boxClass;    
    }  
  }
  funClick(btn1,"divWidth");
  funClick(btn2,"divHeight");
  funClick(btn3,"divBgColor");
}
</script>
</head>
<body>
<div class="box">
<p>这里是少许文本</p>
  <ul>
  <li id="btn1">点我调整宽度</li>
   <li id="btn2">点我调整高度</li>
   <li id="btn3">点我调整背景颜色</li>
  </ul>
 </div>
</body>
</html>

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

Javascript 相关文章推荐
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
js实现石头剪刀布游戏
Oct 11 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
JS前端可视化canvas动画原理及其推导实现
Aug 05 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 #Javascript
JS绘制生成花瓣效果的方法
Aug 05 #Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 #Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 #Javascript
JS模拟键盘打字效果的方法
Aug 05 #Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 #Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 #Javascript
You might like
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
Joomla开启SEF的方法
2016/05/04 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
Javascript this关键字使用分析
2008/10/21 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
js数组的操作指南
2014/12/28 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python对文件操作知识汇总
2016/05/15 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
python复制文件到指定目录的实例
2018/04/27 Python
python3.6的venv模块使用详解
2018/08/01 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
简短的公司员工自我评价分享
2013/11/13 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
三问三解心得体会
2014/09/05 职场文书
优秀团支部申报材料
2014/12/26 职场文书
任命书格式模板
2015/09/22 职场文书
学习经验交流会总结
2015/11/02 职场文书