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确实会为您的代码添加一些内容，有时甚至会出现过度杀伤！

Answer 2

你所说的都是javascript，是的，它应该通过使用javascript来完成。

您可以直接在div元素中编写内联javascript，或者您可以编写函数来为您执行此操作并在onclick上调用它。

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

2 个答案: