代码描述:jQuery设置div长度宽度。jQuery设置div长度宽度源码实例
设置div的长度和宽度使用CSS就可以完成,并且也非常的简单,例如以下代码:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> div { width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div></div> </body> </html>
上面代码就是用CSS设置div尺寸的一个非常简单的例子。但是有时候需要动态的设置div的宽度,这时单纯的使用CSS实现就比较困难了,下面就介绍一下通过jQuery设置div的宽度,方法有多种,例如使用width()方法、height()、CSS()方法和animate()方法都可以。下面就只介绍一下使用CSS()方法设置div的宽度。代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> #mytest { width: 100px; height: 100px; background-color: green; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function () { jQuery.setWidth = function (divid) { var swidth; var sheight; $("button").click(function () { swidth = $("#width").val(); sheight = $("#height").val(); $(divid).css("width", swidth); $(divid).css("height", sheight); }) } $.setWidth("#mytest"); }) </script> </head> <body> <div id="mytest"></div> 宽度:<input type="text" size="2" id="width" /> 高度:<input type="text" size="2" id="height" /><br /> <button>设置尺寸</button> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能