jQuery中width()方法用法实例-Web前端之家

本文实例讲述了jQuery中width()方法用法。分享给大家供大家参考。具体分析如下：

此方法可以获取或者设置匹配元素的宽度值，默认单位是px。

语法结构一:

$(selector).width()

不带参数的时候是返回第一个匹配元素的当前宽度。
实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title> 
<style type="text/css"> 
div{ 
  height:150px; 
  width:150px; 
  background-color:green; 
  margin-top:10px; 
  text-align:center;
  line-height:150px;
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("div").text($("div").width())
}) 
</script> 
</head> 
<body> 
  <div></div> 
</body> 
</html>

语法结构二:

复制代码代码如下:

$(selector).width(val)

带参数的时候是设置所有匹配元素的宽度，默认单位是px，当然也可以使用其他的单位如em或者百分比等等。
实例代码:

复制代码代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>CSS教程</title> 
<style type="text/css"> 
span{ 
  color:red; 
} 
</style> 
<title>脚本之家</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#btn").click(function(){ 
    alert($("li").index()); 
  }) 
}); 
</script> 
</head> 
<body> 
<div> 
  <ul> 
    <li>后台专区</li> 
    <li>前台专区</li> 
    <li>数据库专区</li> 
    <li>站长交流</li> 
  </ul> 
</div> 
<div>当前li元素的位置:<span>0</span></div> 
<button id="btn">点击查看实例</button> 
</body> 
</html>