<!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. 实例：图像载入、显示、混合与输出［OpenCV 笔记8］

    是的是的,忍着尿意努力更新,就是为了更到wuli男神的部分,当然要把男神放在前面镇楼,欢迎下载配图,具体操作见code wuliEddie.jpg logo.png results.jpg LoadS ...

  2. std::map的操作：插入、修改、删除和遍历

    using namespace std; std::map<int,int> m_map; 1.添加 for(int i=0;i<10;i++) { m_map.insert(mak ...

  3. 静态库的pdb

    静态库也会有pdb,只不过,默认是以vc编译器作为名字,比如vs2003的lib的pdb是vc70.pdb,vs2008则是vc90.pdb

  4. c++学习笔记2（c++简单程序）

    c++的简单程序 练习一: #include <iostream>int main(){std::cout<<"你好c++\n";int x;std::ci ...

  5. linux删除、读取文件原理

    linux删除文件原理 LINUX的文件名是存在父目录的block里面,并指向这个文件额inode节点,这个文件的inode节点再标记指向存放这个文件的block的数据块.我们删除一个文件,实际上并不 ...

  6. 高效的VS调试技巧

    本文总结了十个调试技巧,当你使用VS的时候可以节省你很多时间. 1.悬停鼠标查看表达式 调试有时候很有挑战性,当你步入一个函数想看看哪块出错的时候,查看调用栈来想想值是从哪来的.另一些情况下,则需要添 ...

  7. CSS小注意（初级）

    前言 自己的前端技术相对后台来说要薄弱了很多,这一阵子在努力的学习中,添加样式这是最简单不过的东西了,但是今天我犯了一个错误,不知道大家是不是有时候也会忽略或者做同样的事情,我觉得很大部分人不会,废话 ...

  8. 移动端开发（使用webuploader上传图片,客户端交互,修改alert弹窗等）

    之前实习做的一个移动端的页面 需要的功能有图片上传 点击客户端的返回按钮 有提示(即与客户端有交互) 遇到不少的坑 总结一下问题 1.图片上传功能  使用工具 百度的webuploader 暂时遇到的 ...

  9. yii2 ActiveRecord常用用法

    User::find()->all();    返回所有数据   User::findOne($id);   返回 主键 id=1  的一条数据   User::find()->where ...

  10. mongodb3.2系统性学习——5、游标 模糊查询 findAndModify函数

    1首先介绍查询结果 返回的过程: 进行查询的时候mongodb 并不是一次哪个返回结果集合的所有文档,而是以多条文档的形式分批返回查询的结果,返回文档到内存中. 好处: 减少了客户端与服务器端的查询负 ...