3.29 学前端 jquery之操作元素之CSS操作

最新推荐文章于 2024-06-02 18:15:35 发布

yanga11ang

最新推荐文章于 2024-06-02 18:15:35 发布

阅读量225

点赞数

CC 4.0 BY-SA版权

分类专栏： py_web_front end

本文链接：https://blog.youkuaiyun.com/yanga11ang/article/details/79740937

py_web_front end 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个使用CSS和jQuery实现的功能示例，包括返回顶部按钮和滚动菜单。通过这些示例，读者可以了解如何利用CSS进行样式设置，以及如何结合jQuery进行页面元素的位置控制和响应式操作。

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

3.2 CSS操作
3.2.1(样式)

css("{color:'red',backgroud:'blue'}")

3.2.2(位置)

offset()
position()
scrollTop()
scrollLeft()

3.2.3(尺寸)

height()
width()

实例返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-2.2.3.js"></script>
    <script>
        window.onscroll=function(){
            var current=$(window).scrollTop();
            console.log(current)
            if (current>100){
                $(".returnTop").removeClass("hide")
            }
            else {
                $(".returnTop").addClass("hide")
            }
        }
        function returnTop(){
            //$(".div1").scrollTop(0);
            $(window).scrollTop(0)
        }
    </script>
    <style>
        body{
            margin: 0px;
        }
        .returnTop{
            height: 60px;
            width: 100px;
            background-color: darkgray;
            position: fixed;
            right: 0;
            bottom: 0;
            color: greenyellow;
            line-height: 60px;
            text-align: center;
        }
        .div1{
            background-color: orchid;
            font-size: 5px;
            overflow: auto;
            width: 500px;
        }
        .div2{
            background-color: darkcyan;
        }
        .div3{
            background-color: aqua;
        }
        .div{
            height: 300px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="div1 div">
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
    </div>
    <div class="div2 div"></div>
    <div class="div3 div"></div>
    <div class="returnTop hide" onclick="returnTop();">返回顶部</div>
</body>
</html>

实例滚动菜单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0px;
        }
        img {
            border: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .wrap{
            width: 980px;
            margin: 0 auto;
        }

        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        .pg-header .logo{
            float: left;
            padding:5px 10px 5px 0px;
        }
        .pg-header .logo img{
            vertical-align: middle;
            width: 110px;
            height: 40px;

        }
        .pg-header .nav{
            line-height: 50px;
        }
        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: #ccc;
            padding: 0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        .pg-body{
        }
        .pg-body .catalog{
            position: absolute;
            top:60px;
            width: 200px;
            background-color: #fafafa;
            bottom: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }

        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }

        .pg-body .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="#">
                    <img src="images/3.jpg">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="#">首页</a>
                    </li>
                    <li>
                        <a  href="#">功能一</a>
                    </li>
                    <li>
                        <a  href="#">功能二</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="pg-body">
        <div class="wrap">
            <div class="catalog">
                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
                <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
            </div>
            <div class="content">
                <div menu="function1" class="section">
                    <h1>第一章</h1>
                </div>
                <div menu="function2" class="section">
                    <h1>第二章</h1>
                </div>
                <div menu="function3" class="section">
                    <h1>第三章</h1>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="js/jquery-2.2.3.js"></script>
    <script type="text/javascript">

        window.onscroll=function(){
            var ws=$(window).scrollTop();
            if (ws>50){
                $(".catalog").addClass("fixed")
            }
            else {
                $(".catalog").removeClass("fixed")
            }
            $(".content").children("").each(function(){
                var offtop=$(this).offset().top;
                //console.log(offtop)
                var total=$(this).height()+offtop;
                if (ws>offtop && ws<total){
                    if($(window).height()+$(window).scrollTop()==$(document).height()){
                        var index=$(".catalog").children(" :last").css("fontSize","40px").siblings().css("fontSize","12px")
                        console.log(index)
                        target='div[auto-to="'+index+'"]';
                        $(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px")
                    }
                    else{
                        var index=$(this).attr("menu");
                        target='div[auto-to="'+index+'"]';
                        $(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px")
                    }
                }
            })
        }
    </script>
</body>
</html>