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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
微信小程序获取当前位置和城市名
Nov 13 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 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将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
Python rstrip()方法实例详解
2018/11/11 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
法学毕业生自我鉴定
2014/01/31 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android