jquery 学习 - CSS 操作

Posted 2021-01-15 Anec

html + CSS 样式

/*CSS样式*/
<style>
        body{
            margin: 0;
        }
        div{
            width: 100%;
            height: 2000px;
            background-color: aquamarine;
            margin: 0;
        }
        .a1{
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 90px;
            height: 30px;
            background-color: darkgoldenrod;
            color: white;
        }
        .ds{
           display: none;
        }
    </style>

/*HTML*/
<div></div>
<div>
    <button class="a1 ds" onclick="f2()">返回顶部</button>
</div>

 

CSS操作

//CSS 操作:

    //样式操作:
        $("").css({属性:值})

    //偏移量属性
        $("").offset.属性
        //相对于视图的偏移量

        $("").position.属性
        //相对于父标签的偏移量

    //尺寸大小
        $("").height(‘数值‘)
        $("").width(‘数值‘)

        $("").innerHeight(‘数值‘)
        $("").innerWidth(‘数值‘)

        $("").outerHeight(‘数值‘)
        $("").outerWidth(‘数值‘)

    //滚动条
    $("").scrollTop(数值)
    $("").scrollLeft(数值)


    //必须定义到windows事件里
    //windows onscroll 监听事件
    window.onscroll=function f() {
        var num = $(window).scrollTop();
        if (num >500){
            // $(‘.a1‘).removeClass(‘ds‘)
            $(‘.a1‘).show(1000)
        }
        else {
            // $(‘.a1‘).addClass(‘ds‘)
            $(‘.a1‘).hide(1000)
    }};

    function f2() {
        $(window).scrollTop(0)
    }