<!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. 01_JavaMail_03_邮件发送简单实例

    [JavaMail中的核心类] 1.Session:类似Jdbc中的Connection的作用 2.MimeMessage:邮件信息类 3.Transport:发送器,用来发送邮件 [工程截图] [具 ...

  2. C++动态分配内存

    动态分配(Dynamic Memory)内存是指在程序运行时(runtime)根据用户输入的需要来分配相应的内存空间. 1.内存分配操作符new 和 new[] Example: (1)给单个元素动态 ...

  3. （LightOJ 1004） Monkey Banana Problem 简单dp

    You are in the world of mathematics to solve the great "Monkey Banana Problem". It states ...

  4. 九度OJ 1085 求root(N, k) -- 二分求幂及快速幂取模

    题目地址:http://ac.jobdu.com/problem.php?pid=1085 题目描述: N<k时,root(N,k) = N,否则,root(N,k) = root(N',k). ...

  5. IOS 学习笔记 2015-03-20 OC-数值类型

    一 定义 在Objective-C中,我们可以使用c中的数字数据类型,int.float.long等.它们都是基本数据类型,而不是对象.也就是说,不能够向它们发送消息.然后,有些时候需要将这些值作为对 ...

  6. ceph入门学习链接

    https://tobegit3hub1.gitbooks.io/ceph_from_scratch/content/introduction/component.html

  7. C++库编译

    C++库编译 1. POCO编译 进入源文件目录,选择相应的VS版本进行编译(build_vs140).    设置系统环境变量: POCO_BASE 2. Boost编译 ####简单编译    在 ...

  8. JavaFX 开发是遇到一些问题记录

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; color: #000000; min-he ...

  9. iOS Xcode制作模板类－b

    为什么要定义模板类 遵守代码规范可以提高代码可读性, 降低后期维护成本. 当我们定下了一个团队都认同的代码规范, 如我们要求所有的viewController的代码都得按照下面来组织: #pragma ...

  10. C++ 类族的设计

     - 类族的设计]    按以下的提示,由基类的设计和测试开始,逐渐地完成各个类的设计,求出圆格柱体的表面积.体积并输出并且完成要求的计算任务:    (1)先建立一个Point(点)类,包含数据成员 ...