你的位置:首页 > Java教程

[Java教程]如何使用jQuery设置div的长度和宽度


如何使用jQuery设置div的长度和宽度:
设置div的长度和宽度使用CSS就可以完成,并且也非常的简单,例如以下代码:

 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</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="http://www.softwhy.com/" /><title>蚂蚁部落</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>

上面代码实现了根据需要设定div的宽度。CSS()方法的使用非常的简单,可以参阅jQuery的css()方法。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=5804

更多内容可以参阅:http://www.softwhy.com/jquery/