jQuery中几个关于元素宽高方法的区别

最新推荐文章于 2024-09-11 17:09:49 发布

weixin_33728708

最新推荐文章于 2024-09-11 17:09:49 发布

阅读量78

点赞数

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/11230344/2299943

版权

几个关于元素宽高的方法

height():带参数设置，不带参数获取,参数是number类型
width():带参数设置，不带参数获取,参数是number类型
innerHeight() :内边距+内容的高度
innerWidth() :内边距+内容的宽度
outerHeight：上下内边距+内容+上下边框
outerWidth :左右内边距+内容+左右边框

案例测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素宽度与高度</title>
    <style type="text/css">
        #container{
            width:200px;
            height:200px;
            padding:20px;
            margin:30px;
            border:5px solid red;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $(function(){
            console.log("width():"+$("#container").width());
            console.log("height():"+$("#container").height());
            console.log("innerWidth()"+$("#container").innerWidth());
            console.log("innerHeight():"+$("#container").innerHeight());
            console.log("outerWidth():"+$("#container").outerWidth());
            console.log("outerHeight():"+$("#container").outerHeight());
        })
    </script>
</head>
<body>
    <div id = "container"></div>
</body>
</html>

运行结果：

mark

转载于:https://blog.51cto.com/11230344/2299943

weixin_33728708

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中几个关于元素宽高方法的区别

几个关于元素宽高的方法height():带参数设置，不带参数获取,参数是number类型width():带参数设置，不带参数获取,参数是number类型innerHeight() :内边距+内容的高度innerWidth() :内边距+内容的宽度outerHeight：上下内边距+内容+上下边框outerWidth :左右内边距+内容+左右边框案例测试：<!DOCTYP...
复制链接

扫一扫