如果要使用AJAX,请在按钮单击时调整div的大小？

Question

我想从客户端调整div的大小,它的默认值是height:500px,单击我的按钮将其设置为高度:700px.

这是一个asp.net网站.

我被要求使用AJAX这样做,我不清楚这是否意味着使用来自Microsoft AJAX库的客户端javascript,或者如果这意味着使用服务器端AJAX进行部分回发.

如果我打开IE开发人员工具并调整div元素的内联css height:500px属性,则可以很好地调整网格.

<div id="myDiv" style="position: relative; width: 100%; height: 500px; overflow: hidden;">

如果这是使用AJAX完成的,有哪些选择？JavaScript,JQuery,使用其中一个的任何优势？

编辑:谢谢

Answer 1

你可以为此做纯Javascript,或者你可以使用jQuery或其他客户端库.往返服务器将浪费资源.当客户端Javascript这样做时,Ajax(异步Javascript和XML)似乎是浪费.

使用jQuery你的代码将是:

$("#button").click(function() {
    $("#myDiv").style('height','700px');
});

或者,您的样式应该在外部CSS文件中.在该文件中,您将拥有:

#myDiv {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.myDivStartHeight {
    height: 500px;
}
.myDivNewHeight {
    height: 700px;
}

您的HTML最初将分配一个类myDivStartHeight(使用更多语义名称)myDiv.然后你可以这样做:

$("#button").click(function() {
    $("#myDiv").removeClass("myDivStartHeight").addClass("myDivNewHeight");
});

如果你没有其他jQuery需求,这也可以在没有jQuery的纯Javascript中完成.

button.onclick = function() {
    var div = document.getElementById("myDiv");
    if(div) {
        div.style.height = "700px";
    }
};

如果没有jQuery,您可以自己管理更多的浏览器差异,这将不会非常有趣.但是jQuery确实会为你的代码添加一些内容,有时它可能会过度杀伤!