jQuery 元素尺寸

最新推荐文章于 2022-11-11 15:11:56 发布

黄大仙No.1

最新推荐文章于 2022-11-11 15:11:56 发布

阅读量149

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_44378358/article/details/108326752

版权

jQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏


width() / height()	取得四配元素宽度和高度值只算width / height
innerWidth()/ innerHieght	取得四配元素宽度和高度值包含padding
outerWidth()/ outerHeight()	取得四配元素究度和高度值包含padding. border
outerWidth(true)! outerHeight(true)	取得匹配元素宽度和高度值包含padding. borde.margin

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				padding: 10px;
				border: 15px solid red;
				margin: 20px;
			}
		</style>
		<script src="js/jquery-3.5.1.min.js"></script>
	</head>
	<body>
		<div></div>
		<script>
            $(function () {
                // 1. width() / height() 获取设置元素 width和height大小
                console.log($("div").width());
                // $("div").width(300);

                // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小
                console.log($("div").innerWidth());

                // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小
                console.log($("div").outerWidth());

                // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
                console.log($("div").outerWidth(true));
            })
		</script>
	</body>
</html>

黄大仙No.1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 元素尺寸

width() / height()取得四配元素宽度和高度值只算width / heightinnerWidth()/ innerHieght取得四配元素宽度和高度值包含paddingouterWidth()/ outerHeight()取得四配元素究度和高度值包含padding. borderouterWidth(true)! outerHeight(true)取得匹配元素宽度和高度值包含padding. borde.margin<!DOCTYPE...
复制链接

扫一扫

专栏目录