jQuery简单操作④

jQuery简单操作

嗨嗨害！我又来水文章了

1. jQuery元素大小

公共样式

 div {
            width: 200px;
            height: 200px;
            background-color: black;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        } 

① width() / height()
用于获取或设置元素 width和height大小
比如

 console.log($("div").width()); // 输出了盒子的宽度 200
            $("div").width(300); 带数值则修改大小 

② innerWidth() / innerHeight()
用于获取或设置元素 width和height + padding 大小

 console.log($("div").innerWidth()); //220
    // console.log($("div").innerWidth(1000));
    // 带数值则是将盒子的宽+padding修改成1000px，padding还是原来的大小，宽变为980px 

③ outerWidth() / outerHeight()
用于获取设置元素 width和height + padding + border 大小

 console.log($("div").outerWidth()); //250
    // console.log($("div").outerWidth(1000));
    // 同样的，带数值会修改盒子大小，boder和padding不变还是原来的数值，盒子的宽变为950px 

④ outerWidth(true) / outerHeight(true)
用于获取设置 width和height + padding + border + margin

 console.log($("div").outerWidth(true)); //290
    // console.log($("div").outerWidth(1000，true));
    // 第二个参数为true意为为宽内边距边框外边距设置大小，而内边距、边框、外边距大小保持不变 
    // 这里盒子的宽变成910px，和外边距、边距、边框加起来1000px 

总结：

• 以上参数为空，则是获取相应数值，返回的是数字型
• 如果参数为数字，则是修改相应值
• 参数可以不用写单位

2. jQuery位置

位置主要有3个：offset()、position()、scrollTop()/scrollLeft()
公共样式

 <style>
        .father {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 100px;
            overflow: hidden;
        }

        .son {
            width: 150px;
            height: 150p