我们如何增加或减少 div 在 btn click in asp.net 的大小？答案

【问题标题】：how can we increase or decrease the size of div on btn click in asp.net?我们如何增加或减少 div 在 btn click in asp.net 的大小？
【发布时间】：2012-04-04 11:33:49
【问题描述】：

我们如何在 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>

【问题讨论】：

您在代码中引用的 .one( 是什么。
@MarkSchultheiss - 这是一种附加最多执行一次的事件处理程序的方法：api.jquery.com/one
我怀疑这是由<script... 开头的额外_ 引起的，因为this jsfiddle 直接取自您的示例，按预期工作！
@Jamiec - 谢谢，不知道我怎么会错过那个，在这里学到了一些东西！

标签： javascript jquery asp.net css

【解决方案1】：

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/

【讨论】：

【解决方案2】：

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

See working jsFiddle demo

【讨论】：

【解决方案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);
    }

希望对你有所帮助...

【讨论】：

没有人“必须添加一个 id”，我认为使用 onclick 向标记添加行为是我的偏好，这是一种不好的做法。您还添加了其他（可能不存在）标记。