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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
javascript new一个对象的实质
Jan 07 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
Vue 中使用 typescript的方法详解
Feb 17 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
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
Laravel实现表单提交
2017/05/07 PHP
工作需要写的一个js拖拽组件
2011/07/28 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
js实现蒙版效果
2020/01/11 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
Python标准库os.path包、glob包使用实例
2014/11/25 Python
python计算文本文件行数的方法
2015/07/06 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
django中间键重定向实例方法
2019/11/10 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
食堂标语大全
2014/06/11 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
Oracle使用别名的好处
2022/04/19 Oracle