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