1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.     .btn { margin: 0 auto; padding-left: 30%;}
  8.     .img { width: 200px; height: 200px; margin: 10% 30%; background-color: #000; }
  9.  
  10.     </style>
  11.     <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  12. </head>
  13. <body>
  14.     <div class="btn">
  15.         <input type="button" class="be_width" value="变宽">
  16.         <input type="button" class="be_height" value="变高">
  17.         <input type="button" class="be_color" value="变色">
  18.         <input type="button" class="be_hide" value="隐藏">
  19.         <input type="button" class="be_reset" value="重置">
  20.     </div>
  21.  
  22.     <div class="img">
  23.  
  24.     </div>
  25.     <script>
  26.         var width = $(".img").css('width');
  27.         var height = $(".img").css('height');
  28.         var color = $(".img").css('background-color');
  29.  
  30.         var new_width = parseInt(width) + 200 + 'px';
  31.         var new_height = parseInt(height) + 200 + 'px';
  32.         console.log(new_width);
  33.         $(".be_width").on("click", function() {
  34.             $(".img").css("width", new_width);
  35.         });
  36.  
  37.         $(".be_height").on("click", function(){
  38.             $(".img").css("height", new_height);
  39.         });
  40.  
  41.         $(".be_color").on("click", function(){
  42.             $(".img").css("background-color", "red");
  43.         });
  44.  
  45.         $(".be_hide").on("click", function(){
  46.             $(".img").hide();
  47.         });
  48.  
  49.         $(".be_reset").on("click", function(){
  50.             $(".img").show().css({"width": "200px", "height": "200px", "background-color": "#000"});
  51.  
  52.         });
  53.  
  54.     </script>
  55. </body>
  56. </html>

作品第一课----改变DIV样式属性的更多相关文章

  1. 函数传参，改变Div任意属性的值&&图片列表：鼠标移入/移出改变图片透明度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 封装函数通过输入(元素，属性，目标值)改变div样式

    ## 假设一个div样式如下```html<!DOCTYPE html><html lang="en"> <head> <meta cha ...

  3. vue踩坑之路--点击按钮改变div样式

    有时候,我们在做项目的时候,想通过某个按钮来改变某个div样式,那么可以通过以下代码实现: <!DOCTYPE html> <html> <head> <me ...

  4. 作品第一课----循环改变DIV颜色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JavaScript第一天 改变DIV的样式

    onmouseover 当鼠标移到这个对象之上时响应 onmouseout 当鼠标移出这个对象之上时响应 document.getElementById('id')   获取id的元素并可以做一些操作 ...

  6. 作品第一课----获取批量checkbox选中的值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变

    思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...

  8. 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01

    第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...

  9. 【JavaScript从入门到精通】第一课

    第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...

随机推荐

  1. Codevs 1697 ⑨要写信

    1697 ⑨要写信 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 传送门 题目描述 Description 琪露诺(冰之妖精)有操控冷气的能力.能瞬间冻结小东西,比 ...

  2. windows phone 8 设置锁屏背景

    本来想研究一下 利用闪光灯实现手电筒的代码,发现不是简答设置FlashMode属性可以解决问题的,ms也没有提供api,无意瞄了一眼侧边栏的文章列表,发现了设置屏幕锁屏背景的实现,手一抖点进去了.还算 ...

  3. Ajax--1

    1.Ajax:组合利用javascript.XML和DOM等技术,在无需要刷新页面的前提下实现浏览器与服务器通信.它在用户和服务器之间引入了一个中间层,负责转发用户界面和服务器之间的交互.在服务器处理 ...

  4. ubuntu 下的 ftp (gftp)

    功能和 windows 下的 ftp 一样 gftp安装方法apt-get install gftp启动方法:gfpt

  5. 【转】CHAR CHARACTER VARCHAR NCHAR NVARCHAR NVARCHAR2区别

    http://blog.csdn.net/lhl6688/article/details/44156823?ref=myread oracle提供了五种字符数据类型:char.nchar.varcha ...

  6. [转]maven插件的开发

    原文链接: http://clojure.iteye.com/blog/1124188 另一篇文章 http://blog.csdn.net/csfreebird/article/details/77 ...

  7. phpcms V9 首页模板文件解析(转）

    转自:http://www.cnblogs.com/Braveliu/p/5100018.html 转在了解了<phpcms V9 URL访问解析>之后,我们已经知道首页最终执行的是con ...

  8. App - 版本控制

    /**  版本判断 ***/ NSString *versionKey = @"CFBundleVersion"; // 上一次使用版本号(存储在沙盒中的版本号) NSString ...

  9. 把 Eclipse 中的工程 Push 到 Github（适用 Windows 平台）

    今天发现一小技巧,关于如何把Eclipse的某一个Existing project push 到github服务器. Eclipse 应该是 JavaEE 版本. 在project 右键 team, ...

  10. Linux ln命令 - 建立文件/目录链接

    转自Linux ln命令 - 建立文件/目录链接 1. 使用方式:ln [option] source_file dist_file                     -f 建立时,将同档案名删 ...