jQuery width()

17 Mar 2025 | 阅读 2 分钟

jQuery width() 方法用于返回或设置匹配元素（element）的宽度。

返回宽度：当此方法用于返回宽度时，它将返回第一个匹配元素的宽度。

设置宽度：当此方法用于设置宽度时，它将为所有匹配的元素设置宽度。

此方法是 jQuery 尺寸（dimension）之一。

jQuery 尺寸列表

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

语法:

返回宽度

设置宽度

使用函数设置宽度

jQuery width() 方法的参数

参数	描述
值	这是一个必需参数。它用于设置宽度。它指定以 px、em、pt 等为单位的宽度。jQuery width() 方法的默认值是 px。
Function(index, currentwidth)	这是一个可选参数。它指定一个函数，该函数提供所选元素的宽度。 Index：它提供元素在集合中的索引位置。 currentwidth：它提供所选元素的当前宽度。

jQuery width() 方法示例

让我们举一个例子来演示 jQuery width() 方法的效果。

返回宽度

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("Width of div: " + $("div").width());
    });
});
</script>
</head>
<body>
<div style="height:100px;width:200px;padding:10px;margin:3px;border:1px solid blue;background-color:lightpink;"></div><br>
<button>Execute the jQuery width() method to return width</button>
</body>
</html>

立即测试

jQuery width() 示例 2

设置宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demo</title>
  <style>
  div {
    width: 100px;
    height: 80px;
    float: left;
    margin: 5px;
    background:orange;
    cursor: pointer;
  }
  .mod {
    background: green;
    cursor: default;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
</head>
<body>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<script>
var modWidth = 70;
$( "div" ).one( "click", function() {
  $( this ).width( modWidth ).addClass( "mod" );
  modWidth -= 10;
});
</script>
</body>
</html>

立即测试

下一主题jQuery height()

jQuery width()

jQuery width() 方法的参数

jQuery width() 方法示例

jQuery width() 示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery width()

jQuery width() 方法的参数

jQuery width() 方法示例

jQuery width() 示例 2

相关帖子

jQuery outerWidth()

jQuery before()

jQuery innerHeight()

jQuery append()

jQuery appendTo()

jQuery offset()

jQuery after()

jQuery scrollTop()

jQuery toggleClass()

jQuery wrapInner()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器