<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    .btn { margin: 0 auto; padding-left: 30%;}

    .img { width: 200px; height: 200px; margin: 10% 30%; background-color: #000; }

    </style>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

<body>

    <div class="btn">

        <input type="button" class="be_width" value="变宽">

        <input type="button" class="be_height" value="变高">

        <input type="button" class="be_color" value="变色">

        <input type="button" class="be_hide" value="隐藏">

        <input type="button" class="be_reset" value="重置">

    </div>

    <div class="img">

    </div>

    <script>

        var width = $(".img").css('width');

        var height = $(".img").css('height');

        var color = $(".img").css('background-color');

        var new_width = parseInt(width) + 200 + 'px';

        var new_height = parseInt(height) + 200 + 'px';

        console.log(new_width);

        $(".be_width").on("click", function() {

            $(".img").css("width", new_width);

        });

        $(".be_height").on("click", function(){

            $(".img").css("height", new_height);

        });

        $(".be_color").on("click", function(){

            $(".img").css("background-color", "red");

        });

        $(".be_hide").on("click", function(){

            $(".img").hide();

        });

        $(".be_reset").on("click", function(){

            $(".img").show().css({"width": "200px", "height": "200px", "background-color": "#000"});

        });

    </script>

</body>

</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. struts 文件上传下载

    上传 1.编写上传action类 UploadAction.java package jxf.b_upload; import java.io.File; import java.io.IOExcep ...

  2. c++primer复习（六）—面向对象编程

    1 C++中,通过基类的引用(或指针)调用虚函数时,发生动态绑定,两个条件(基类引用或指针.虚函数)缺一不可 虚函数的默认实参将发生静态绑定 2 继承层次的根类一般都需要定义虚析构函数 3 任意非st ...

  3. IOS 学习笔记 2015-03-20 O之 nil,Nil,NULL,NSNull

    1.oc最好 用nil   [ nil  任意方法],不会崩溃 nil 是一个对象值.NULL是一个通用指针(泛型指针). 2. NSNULL,NULL和nil在本质上应该是一样的,NULL和nil其 ...

  4. Percona XtraBackup 备份原理

    前言 Percona XtraBackup(简称PXB)是 Percona 公司开发的一个用于 MySQL 数据库物理热备的备份工具,支持 MySQl(Oracle).Percona Server 和 ...

  5. C# DES

    using System; //这个是使用DES的基础 using System.Security.Cryptography; //这个是处理文字编码的前提 using System.Text; // ...

  6. S3C2440的LCD虚拟显示测试

    一.概述   S3C2440的LCD控制器支持虚拟显示,说的容易理解一点就是,可以显示比实际显示器大的图像.可以这样想象,有一个大的图片,但是显示器(显示串口)比较小,但是我们可以相对于大图片(即大图 ...

  7. 补充一下我对 POJ 3273 的理解，这肯定是我一生写的最多的题解。。。

    题目:http://poj.org/problem?id=3273 当分成的组数越多,所有组的最大值就会越小或不变,这一点不难证明:    如果当前分成了group组,最大值是max,那么max的这一 ...

  8. LightOj_1287 Where to Run

    题目链接 题意: 有n个街口和m条街道, 你后边跟着警察,你需要进行大逃亡(又是大爱的抢银行啊),在每个街口你都有≥1个选择, 1)停留在原地5分钟. 2)如果这个街口可以到xi这个街口, 并且, 通 ...

  9. IP工具类——IpAddress.java

    根据IP地址获取详细的地域信息,也可通过 http://whois.pconline.com.cn/ 获取地址信息. 源码如下:(点击下载  IpAddress.java) import java.i ...

  10. 排名第一、第二的OCR软件

    排名第一.第二的OCR软件 第一:ABBYY FineReader      OCR世界排名第一,在俄罗斯获国际科技大奖奖超过卡巴斯基! 不仅仅只是文字识别,还能表格识别,版面还原,字体识别,文档结构 ...