作品第一课----改变DIV样式属性 

<!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>

 

posted @ 2015-12-23 21:53  Sam的幻想  阅读(228)  评论(0)    收藏  举报