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 相关文章推荐
jQuery实用函数用法总结
Aug 29 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
js实现二级导航功能
Mar 03 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
vue-router传参用法详解
Jan 19 Javascript
angularjs自定义过滤器demo示例
Aug 24 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中的字符串函数
2006/10/09 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python原始套接字编程示例分享
2014/02/21 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
python实现随机漫步算法
2018/08/27 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
Python API自动化框架总结
2019/11/12 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
行政总监岗位职责
2013/12/05 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
春节联欢会主持词
2014/03/24 职场文书
神秘岛读书笔记
2015/07/01 职场文书
校运会加油稿大全
2015/07/22 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
中秋节感想
2015/08/10 职场文书
Python加密技术之RSA加密解密的实现
2022/04/08 Python