JQuery使用方法二（CSS样式）_jquery padding-CSDN博客

本文链接：https://blog.csdn.net/weixin_43765641/article/details/127100275

本文介绍了如何使用JavaScript操作CSS样式，包括获取和设置颜色、背景色，设置多个样式属性，获取元素相对于窗口的位置，获取和设置滚动值，以及获取元素的尺寸和边距。这些技巧对于前端开发中的动态效果和布局调整至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录

一、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()