码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-10-15 14:30:52      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:red   rip   的区别   div   内容   宽度   运行   案例   结果   

几个关于元素宽高的方法
  • 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>

运行结果:

技术分享图片

最后欢迎关注博主的网络课堂:http://edu.51cto.com/lecturer/11220344.html

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

标签:red   rip   的区别   div   内容   宽度   运行   案例   结果   

原文地址:http://blog.51cto.com/11230344/2299943

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!