jQuery-样式相关操作

• css(name|pro|[,val|fn]
  用于设置或获取元素CSS样式

<script>
    $(function () {
        // 1.逐个依次设置
        $("div").css("width", "100px");
        $("div").css("height", "100px");
        $("div").css("background", "red");

        // 2.链式设置
        // 注意点: 链式操作如果大于3步, 建议分开
        $("div").css("width", "100px").css("height", "100px").css("background", "blue");

        // 3.批量设置
        $("div").css({
            width: "100px",
            height: "100px",
            background: "red"
        });

        // 4.获取CSS样式值
        console.log($("div").css("background"));;
    });
</script>

jQuery操作元素尺寸

• width([val|fn])
  设置或获取元素宽度(不包括padding和border)

<script>
    $(function () {
        // 获取元素宽度
        console.log($("div").width());;
        // 设置元素宽度
        $("div").width("200px");
    });
</script>

• height([val|fn])
  • 设置或获取元素宽度(不包括padding和border)

<script>
    $(function () {
        // 获取元素高度
        console.log($("div").height());;
        // 设置元素高度
        $("div").height("200px");
    });
</script>

• innerHeight()/innerWidth()
  获取内部区域宽度/高度(包含内边距,不包含边框)

<!--
div{
  width: 100px;
  height: 100px;
  background: red;
  padding: 10px;
  border: 5px solid #00a7f7;
}
-->
<script>
    $(function () {
        // 获取内部区域宽度
        console.log($('div').innerWidth()); // 120 = 100 + 10 + 10
        // 获取内部区域高度
        console.log($('div').innerHeight());  // 120 = 100 + 10 + 10
    });
</script>

• outerHeight/outerWidth()
  获取元素外部宽度/高度(默认包括补白和边框)

<!--
div{
  width: 100px;
  height: 100px;
  background: red;
  padding: 10px;
  border: 5px solid #00a7f7;
}
-->
<script>
    $(function () {
        // 获取元素外部宽度
        console.log($('div').outerWidth()); // 130 = 100 + 10 + 10 + 5 +5
        // 获取元素外部高度
        console.log($('div').innerHeight());  // 130 = 100 + 10 + 10 + 5 + 5
    });
</script>

• offset([coordinates])
  设置或获取元素距离窗口的偏移位

<script>
    $(function () {
        // 获取元素距离窗口的左偏移位
        console.log($(".son").offset().left);
        // 获取元素距离窗口的上偏移位
        console.log($(".son").offset().top);  
        // 设置元素距离窗口的偏移位
        $(".son").offset({left: 10});
    });
</script>

• position()
  • 获取匹配元素相对父元素的偏移位
  • position方法只能获取不能设置

<script>
    $(function () {
        // 获取匹配元素相对父元素的偏移位
        console.log($(".son").position().left);
        console.log($(".son").position().top); 
    });
</script>

• scrollTop([val])/scrollLeft([val])
  • 设置或获取匹配元素相对滚动条顶部的偏移

<script>
    $(function () {
        // 获取匹配元素相对滚动条顶部的偏移
        console.log($(".scroll").scrollTop());
        // 获取网页滚动的偏移位
        console.log($("body").scrollTop()+$("html").scrollTop());

        // 设置滚动的偏移位
        $(".scroll").scrollTop(300); 
        // 设置网页滚动偏移位
        $("html,body").scrollTop(300);
    });
</script>