jQuery操作元素的宽和高

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

几个关于元素宽高的方法

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

案例测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素宽度与高度</title>
    <style type="text/css">
        #container{
            width:200px;
            height:200px;
            padding:3px;
            margin:7px;
            border:1px solid red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.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>