<!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. 04_XML_03_XMLDTD约束与校验

    [什么是XML约束] 在XML技术里,可以编写一个文档来约束一个XML文档的书写规范,称之为XML约束. 常见的XML约束技术有:XML DTD和XML Schema DTD(Document Typ ...

  2. Js获取fileupload的绝对路径时总是的到C:\fakepath\+文件名称的 解决方案

    解决方法: Internet选项->安全->自定义级别->将文件下载到服务器时包含本地目录路径  启用就可以了.

  3. Java中“|”和“||”用法的区别

    例子: int a = 5; int b = 10; if(a > 4 | b++ > 10) { System.out.println("a:"+a+"\n ...

  4. mysql 断电 启动不了 start: Job failed to start

    公司内部服务器,突然断电,造成无法启动的解决办法 把my.cnf中配置的datadir路径下的ib_logfile* (比如ib_logfile0, lb_logfile1....)文件移到另外一个目 ...

  5. Linux网络

    netstat 查看网络状态 netstat: -r :显示路由表 -n: 以数字方式显示 -u: 显示UDP连接 -t :显示TCP连接 -l:显示监听状态的连接 -p: 显示监听指定套接字的进程的 ...

  6. MySQL的基本

    MySQL的基本语法 left JOIN 左表匹配右表 有没有内容全部匹配 SELECT Persons.LastName, Orders.OrderNo FROM Persons INNER JOI ...

  7. Mac苹果电脑加密视频播放器使用教程

    1.   下载文件 https://pan.baidu.com/s/1slhFYuL 2.    操作流程 温馨提示 播放时,请务必保证播放设备联网(原因:用户名权限验证需要网络,播放后10秒即可关闭 ...

  8. 直接通过curl方式取得数据、模拟登陆、POST数据

    博客园的Markdown编辑器太坑爹了@!!! 算了.不用格式了!!! /********************** curl 系列 ***********************/ //直接通过c ...

  9. mysql-5.5.25-winx64在win7 x64 免安装配置

    os:win7 x64 mysql:mysql-5.5.25-winx64 将mysql-5.5.25-winx64.zip 解压缩到F:\mysql-5.5.25-winx64 目录下: 1.将my ...

  10. 我用C#调用C编译的dll中有这样一个函数,函数大概的功能就是把数据保存到buf缓冲区中：

    我用C#调用C编译的dll中有这样一个函数,函数大概的功能就是把数据保存到buf缓冲区中: C/C++ code   ? 1 int retrieve(int scanno,void* buf); 在 ...