jQuery动态设置div元素的尺寸
分类:实例代码
jQuery动态设置div元素的尺寸属于前端实例代码,有关更多实例代码大家可以查看。
由于jquery的出现,使得对元素的尺寸设置非常的便利简单。
下面就通过代码实例介绍一下如何实现此效果。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> #antzone{ width:200px; height:100px; background:#CCC; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(function(){ $("#bt").click(function(){ $("#antzone").css("width","300px"); $("#antzone").css("height","300px"); }) }); </script> </head> <body> <div id="antzone"></div> <input type="button" id="bt" value="查看效果"/> </body> </html>
上面的代码实现我们的,非常的简单,主要是利用css()方法实现。
css()方法可以参阅jQuery css()一章节。
jQuery动态设置div元素的尺寸,这样的场景在实际项目中还是用的比较多的,关于jQuery动态设置div元素的尺寸就介绍到这了。