jquery获取元素宽高

最新推荐文章于 2024-03-29 10:03:44 发布

sayyy

最新推荐文章于 2024-03-29 10:03:44 发布

阅读量1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/sayyy/article/details/117384344

版权

JavaScript 专栏收录该内容

88 篇文章 2 订阅

订阅专栏

前言

在这里插入图片描述

jquery获取元素宽高

<!DOCTYPE html>
<html lang="zh" >
<head>
	<meta charset="utf-8">
	<style>
	  li {
		margin: 10px;
		padding: 5px;
		border: 2px solid #666;
		width: 800px;
		height: 100px;
		display: block;
	  }
	  li:first-child {
		background-color:#0fc;
	  }
	  li:nth-child(2) {
		background-color:#cf0;
	  }
	  li:nth-child(3) {
		background-color:#cfc;
	  }
	  li:last-child {
		background-color:#3f0;
	  }
	  li:nth-last-child(2) {
		background-color:#333;
	  }
	</style>
</head>
<body class="white-bg">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>


<script src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("li:eq(0)").text("width:" + $("li:eq(0)").width() 
				  + "，innerWidth:" + $("li:eq(0)").innerWidth() 
				  + "，outerWidth:" + $("li:eq(0)").outerWidth() 
				  + "，outerWidth(true):" + $("li:eq(0)").outerWidth(true));
	$("li:eq(1)").text("width:" + $("li:eq(1)").height() 
				  + "，innerHeight:" + $("li:eq(1)").innerHeight() 
				  + "，outerHeight:" + $("li:eq(1)").outerHeight() 
				  + "，outerHeight(true):" + $("li:eq(1)").outerHeight(true));
});
</script>
</body>
</html>

参考

https://www.cnblogs.com/goloving/p/7113567.html
https://api.jquery.com/width/
https://api.jquery.com/innerWidth/
https://api.jquery.com/outerWidth/
https://api.jquery.com/