上按一下按钮重新调整股利，应与AJAX这样做？ [英] Resizing a div on button click, should this be done with AJAX?

问题描述

我要调整从客户端的一个div，它的默认值是高度：500px的，点击我的按钮，将其设置为高度：700像素

I want to resize a div from client-side, it's default value is height:500px, clicking my button sets it to height: 700px.

这是一个asp.net网站。

It's an asp.net web site.

有人问我做这个使用AJAX和我不清楚，如果这意味着要使用客户端JavaScript从Microsoft AJAX库，如果这意味着要使用服务器端AJAX做一个局部回传。

I am asked to do this using AJAX and I am unclear if this means to use the client-side javascript from the Microsoft AJAX Library, or if this means to use server-side AJAX doing a partial postback.

网格可以，如果我打开IE开发工具和调整联CSS高度来调整精：div元素的500px的属性

The grid can be adjusted fine if I open the IE developer tools and adjust the inline css height:500px attribute of the div element.

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

如果这样做使用AJAX，有什么选择？ JavaScript的，JQuery的，使用一个或其他的什么优势？

Should this be done using AJAX, what are the options? JavaScript, JQuery, any advantage of using one or the other?

编辑：谢谢

推荐答案

您可以做纯粹的Javascript这一点，也可以使用jQuery或其他客户端库。往返于服务器是一种资源的浪费。 AJAX（异步JavaScript和XML）似乎浪费了这里的时候，客户端Javascript会做。

You can do pure Javascript for this, or you can use jQuery or another client side library. A round trip to the server would be a waste of resources. Ajax (Asynchronous Javascript and XML) seems a waste here when client-side Javascript would do.

使用jQuery的code将是：

Using jQuery your code would be:

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

另外，你的风格确实应该在外部CSS文件。在该文件中，你将有：

Alternately, your styles should really be in an external CSS file. In that file, you would have:

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

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

Your HTML would initially assign a class of myDivStartHeight (using a more semantic name) to myDiv. Then you could do:

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

这也可以在纯的Javascript做不jQuery的，如果你没有其他需要的jQuery。

This can also be done in pure Javascript without jQuery if you have no other need for jQuery.

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

没有jQuery的你打开自己来管理更多的浏览器的差异，这将不会是非常有趣的。不过jQuery也添加位到code和存在时，它可以是矫枉过正！次

Without jQuery you open yourself up to managing more browser differences, which won't be terribly fun. However jQuery does add bits to your code and there are times when it can be overkill!

这篇关于上按一下按钮重新调整股利，应与AJAX这样做？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！