温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-07-26 19:54:36 来源:网络 阅读:254 作者:mirindaRain 栏目:web开发

几个关于元素宽高的方法

  • 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>

运行结果:

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI