思洋互动网站建设学前班

jQuery动态修改DIV层的尺寸（1）

jQuery动态修改DIV层的尺寸同样可以使用前面提到的尺寸函数，只是这里需要将参数值带给这两个函数。在下面的示例中用两个文本框接收用户动态输入DIV的宽和高，并当用户单击"修改尺寸"按钮时，修改DIV的尺寸。

1．JavaScript功能实现

HTML代码和CSS样式参考光盘内容。这里直接看一下JavaScript功能实现：

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#update").click(function(){  
4. 4           var width=$("#divwidth").val();  
5. 5           var height=$("#divheight").val();         
6. 6           $("#div1").width(width).height(height);  
7.             //通过高度和宽度函数设定元素高和宽  
8. 7       });  
9. 8   });  
10. 9 </script> 

 

效果如图3.6和图3.7所示。

图3.6  DIV初始尺寸大小

图3.7  动态修改DIV的尺寸

2．通过css()函数修改DIV尺寸

与上面获取尺寸操作一样，也可以通过css()函数来修改DIV的尺寸。修改后代码如下：

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#update").click(function(){  
4. 4           var width=$("#divwidth").val();  
5. 5           var height=$("#divheight").val();         
6. 6           $("#div1").css({"width":width+"px","height":height+"px"});              //通过CSS样式设定函数设定元素的高和宽  
7. 7       });  
8. 8   });  
9. 9 </script> 

 

这里使用了css()函数属性对象的形式设定了DIV层的大小。jQuery的一个主要特点是函数链，所谓函数链，就是可以将多个元素操作函数以链条的形式接在元素对象后面，从而完成对元素对象的顺序多重操作。例如，可以使用刚才的示例以函数链的形式编写：

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#update").click(function(){  
4. 4           var width=$("#divwidth").val();  
5. 5           var height=$("#divheight").val();         
6. 6           $("#div1").css("width",width+"px").css("height",height+"px");           //两次调用CSS样式设定函数链接使用方式设定元素的高度和宽度  
7. 7       });  
8. 8   });  
9. 9 </script>