jQuery CSS 操作 - width() 方法 概述
jQuery 2022-06-01 17:16:15小码哥的IT人生shichen
jQuery CSS 操作 - width() 方法
实例
设置 <p> 元素的宽度：
$(".btn1").click(function(){
$("p").width(200);
});
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").width(200);
});
});
</script>
</head>
<body>
<p style="background-color:yellow">This is a paragraph.</p>
<button class="btn1">改变宽度</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
width() 方法返回或设置匹配元素的宽度。
返回宽度
返回第一个匹配元素的宽度。
如果不为该方法设置参数，则返回以像素计的匹配元素的宽度。
语法
$(selector).width()
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("span").text($("p").width());
});
});
</script>
</head>
<body>
<p>本段落的宽度是 <span>unknown</span> px。</p>
<button class="btn1">获得宽度</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
设置宽度
设置所有匹配元素的宽度。
语法
$(selector).width(length)
| 参数 | 描述 |
|---|---|
| length |
可选。规定元素的宽度。 如果没有规定长度单位，则使用默认的 px 单位。 |
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").width(200);
});
});
</script>
</head>
<body>
<p style="background-color:yellow">This is a paragraph.</p>
<button class="btn1">改变宽度</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
使用函数来设置宽度
使用函数来设置所有匹配元素的宽度。
语法
$(selector).width(function(index,oldwidth))
| 参数 | 描述 |
|---|---|
| function(index,oldwidth) |
规定返回被选元素新宽度的函数。
|
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").width(function(n,c){
return c-50;
});
});
});
</script>
</head>
<body>
<p style="background-color:yellow">这是一个段落。</p>
<button>以 50 像素的幅度减少 p 元素的宽度</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
亲自试一试 - 实例
完整实例【获得文档和窗口元素的宽度】：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("#span1").text($(window).width());
$("#span2").text($(document).width());
});
});
</script>
</head>
<body>
<p>窗口的宽度是 <span id="span1">unknown</span> px。</p>
<p>文档的宽度是 <span id="span2">unknown</span> px。</p>
<button class="btn1">获得宽度</button>
<p>在本例中，窗口和文档的宽度是相同的，因为它们在 iframe 中显示。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
使用 width() 方法来获得 document 和 window 元素的当前宽度。
完整实例【使用 em 和 % 值来设置宽度】：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").width("50%");
});
$(".btn2").click(function(){
$("p").width("20em");
});
});
</script>
</head>
<body>
<p style="background-color:yellow">This is a paragraph.</p>
<button class="btn1">把宽度设置为 50%</button>
<button class="btn2">把宽度设置为 20 em</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
使用指定的长度单位来设置元素的宽度。
