jquery 学习 - CSS 操作

Posted Anec

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery 学习 - CSS 操作相关的知识,希望对你有一定的参考价值。

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)
    }

 



以上是关于jquery 学习 - CSS 操作的主要内容,如果未能解决你的问题,请参考以下文章

jQuery学习—jQuery操作CSS和表格

高效Web开发的10个jQuery代码片段

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升

jquery 学习 - CSS 操作

jQuery的DOM操作