在按钮单击时调整 div 的大小，这应该用 AJAX 完成吗？

Posted 2023-03-06

【中文标题】在按钮单击时调整 div 的大小，这应该用 AJAX 完成吗？

【英文标题】：Resizing a div on button click, should this be done with AJAX?

【发布时间】：2011-04-12 16:39:31

【问题描述】：

我想从客户端调整一个 div 的大小，它的默认值为 height:500px，点击我的按钮将它设置为 height: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，使用其中之一有什么优势？

编辑：谢谢

【参考方案1】：

您可以为此使用纯 Javascript，也可以使用 jQuery 或其他客户端库。往返服务器会浪费资源。 Ajax（异步 Javascript 和 XML）在这里似乎是一种浪费，而客户端 Javascript 可以这样做。

使用 jQuery，您的代码将是：

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

或者，您的样式实际上应该位于外部 CSS 文件中。在该文件中，您将拥有：

#myDiv 
    position: relative;
    width: 100%;
    overflow: hidden;

.myDivStartHeight 
    height: 500px;

.myDivNewHeight 
    height: 700px;

您的 html 最初会为 myDiv 分配一个 myDivStartHeight 类（使用更语义化的名称）。然后你可以这样做：

$("#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 确实会在您的代码中添加一些位，并且有时它可能会过大！

【参考方案2】：

您所说的都是javascript，是的，应该使用javascript来完成。

您可以直接在您的 div 元素中编写内联 javascript，或者您可以编写函数来为您执行此操作并将其称为 onclick。