Question

如何在asp.net上点击btn增加或减少div的大小？

样式表

<style>
div{
    width:50px; 
    height:70px; 
    float:left; 
    margin:5px; 
    background:rgb(255,140,0); 
}
</style>

使用Javascript：

<script src="_http://code.jquery.com/jquery-latest.js"></script>
<script>
$("div").one('click', function () {
    $(this).height(30);
});
</script>

标记：

<body>
    <div></div>
</body>

Answer 1

$("div").click(function() { $(this).height(30); });

<强> See working jsFiddle demo

Answer 2

<强> HTML

<div id="div1"></div>
<input type="button" id="aAdd"  value="Increase" />
<input type="button" id="aDecrease"  value="Decrease" />

<强>脚本

var currentHeight;
var measurement=100;

$(function(){    
    currentHeight=$("#div1").height();  
    $("#aAdd").click(function(){      
        currentHeight=parseInt(currentHeight)+measurement    
        $("#div1").height(currentHeight);
    });
     $("#aDecrease").click(function(){     
        currentHeight=parseInt(currentHeight)-measurement             
        $("#div1").height(currentHeight);
    });

});

以下是工作示例http://jsfiddle.net/pJWMh/14/

Answer 3

你为div提供id的所有拳头。我修改了一些html和放置按钮，如下所示。

<body>
<form id="form1" runat="server">
<div id="dvMain">
</div>

<input id="btn" onclick="javascript:changeDivSize();" type="button" value="Change Size" />

</form>

调用javascript functin changeDivSize（），如下所示

function changeDivSize() {

        $("#dvMain").height(500);
    }

希望这会对你有帮助......

我们如何在asp.net上点击btn增加或减少div的大小？

3 个答案: