JQuery使用方法二（CSS样式）

目录

一、CSS

1、获取样式值

2、设置css样式值

3、设置多个css样式值

4、相对于窗口，获取top和left值：offset()

5、获取滚动的值：scrollTop()、scrollLeft()

6、设置滚动的值

7、获取高度和获取宽度

8、获取高度+上下的padding距离

9、获取宽度+左右的padding距离

10、获取高度+上下的padding+上下的border

11、获取宽度+左右的padding+左右的border

---

一、CSS

1、获取样式值

1.1、获取到的字体颜色为rgb(255,0,0)

<script>
    console.log($("#div1").css("color"));
</script>

 

1.2、获取到的背景颜色为rgb(127,255,212)

console.log($("#div1").css("backgroundColor"));

 

2、设置css样式值

<script>
    $("#div1").css("color","gold")
</script>

3、设置多个css样式值

<script>
    
    $("#div1").css(
        {
            "color":"red",
            "font-size":"30px",
            "text-align":"center"
        }
    )

</script>

4、相对于窗口，获取top和left值：offset()

<script>
    console.log($("#div1").offset());
</script>

5、获取滚动的值：scrollTop()、scrollLeft()

获取距离元素顶部滚动值：scrollTop()

获取距离元素左边框滚动值：scrollLeft()

<script>

    setInterval(function () {
        var x = $("#div1").scrollTop()
        console.log(x);
    }, 200);

</script>

6、设置滚动的值

scrollTop(400)

scrollLeft(400)

7、获取高度和获取宽度

height()、width()

console.log( $("#div1 p").height());

 

8、获取高度+上下的padding距离

innerHeight()

9、获取宽度+左右的padding距离

innerWidth()

10、获取高度+上下的padding+上下的border

outerHeight()

11、获取宽度+左右的padding+左右的border

outerWidth()