作品第一课----改变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 {  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>

相关阅读:
感想2
感想1
记录4
记录3
记录2
记录1
库存物资管理系统-测试
开学测试
大二下开学测试有感
大二下周总结一

原文地址：https://www.cnblogs.com/samtrybest/p/5071436.html