[jQuery基础] jQuery对象 -- CSS相关

最新推荐文章于 2024-08-16 17:20:49 发布

^ω^奋斗小青年

最新推荐文章于 2024-08-16 17:20:49 发布

阅读量338

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/DeathDomain/article/details/106795302

版权

jQuery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

CSS相关

操作CSS

逐个设置

在这里插入图片描述

$(function () {
    $("div").css("width", "100px")
    $("div").css("height", "100px")
    $("div").css("background", "red")
})

链式设置

链式操作如果大于3步, 建议分开

QQæˆªå›¾20200616203900

$(function () {
    $("div").css("width", "100px").css("height", "100px").css("background", "blue")
})

批量设置

QQæˆªå›¾20200616203943

$(function () {
    $("div").css({
        width: "100px",
        height: "100px",
        background: "yellow"
    })
})

获取CSS样式值

在这里插入图片描述

$(function () {
    console.log($("div").css("width"))
    console.log($("div").css("height"))
    console.log($("div").css("background"))
})

位置和尺寸

监听获取

offset([coordinates])

作用: 获取元素距离窗口的偏移位

position()

作用: 获取元素距离定位元素的偏移位

监听设置

position方法只能获取不能设置

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
            border: 50px solid #000;
            margin-left: 50px;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 编写jQuery相关代码
            var btns = document.getElementsByTagName("button")
            // 监听获取
            btns[0].onclick = function () {
                // 获取元素的宽度
                // console.log($(".father").width())//200


                // offset([coordinates])
                // 作用: 获取元素距离窗口的偏移位
                // console.log($(".son").offset().left)//150
                // position()
                // 作用: 获取元素距离定位元素的偏移位


                console.log($(".son").position().left)//50
            }
            // 监听设置
            btns[1].onclick = function () {
                // 设置元素的宽度
                // $(".father").width("500px")

                // $(".son").offset({
                //     left: 10
                // })

                // 注意点: position方法只能获取不能设置
                // $(".son").position({
                //     left: 10
                // })

                $(".son").css({
                    left: "10px"
                })
            }
        })
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <button>监听获取</button>
    <button>监听设置</button>
</body>
</html>

scrollTop方法

监听设置

获取滚动的偏移位

console.log($(".scroll").scrollTop())

获取网页滚动的偏移位

为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
console.log($("body").scrollTop()+$("html").scrollTop())

监听设置

设置滚动的偏移位

$(".scroll").scrollTop(300)

设置网页滚动偏移位

为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
$("html,body").scrollTop(300)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .scroll{
            width: 100px;
            height: 200px;
            border: 1px solid #000;
            overflow: auto;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 编写jQuery相关代码
            var btns = document.getElementsByTagName("button")
            // 监听获取
            btns[0].onclick = function () {
                // 获取滚动的偏移位
                // console.log($(".scroll").scrollTop())
                // 获取网页滚动的偏移位
                // 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
                console.log($("body").scrollTop()+$("html").scrollTop())
            }
            btns[1].onclick = function () {
                // 设置滚动的偏移位
                $(".scroll").scrollTop(300)
                // 设置网页滚动偏移位
                // 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
                $("html,body").scrollTop(300)
            }
        })
    </script>
</head>
<body>
    <div class="scroll">我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
    </div>
    <button>获取</button>
    <button>设置</button>
</body>
</html>