jQuery-对标签的样式操作

一、操作样式类

// 1.给标签添加样式类
$("选择器").addClass("类名")
// 2.移除标签的样式类
$("选择器").removeClass("类名")
// 3.判断标签是否含有某个样式类
$("选择器").hasClass("类名")
// 4.如果标签包含某个样式类，就移除，否则，就添加
$("选择器").toggleClass("类名")

<!DOCTYPE html>
<html>
<head>
    <title>操作样式类</title>
    <style type="text/css">
        .div1{
            width: 100px;
            height: 100px;
        }
        .bacc{
            background-color: red;
        }
        .border{
            border: 1px solid black;
        }
        .black1{
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="div1">

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

        // 1. 添加一个样式类
        $(".div1").addClass("bacc border");
        // 2. 删除一个样式类
        $(".div1").removeClass("border");  // 移除一个类
        // 3. 判断是否包含某个样式类
        console.log($(".div1").hasClass("border"));  // false
        console.log($(".div1").hasClass("bacc")); // true

        // 4. 切换CSS类，如果有就移除，没有就添加
        $(".div1").on("click",function() {
            // body...
            $(this).toggleClass("black1");
        })
    </script>
</body>
</html>

操作样式类demo

二、操作CSS属性

// 1.获取标签CSS属性的值
$(".div1").css("backgroundColor")l
// 2.给标签CSS属性赋值
$(".div1").css("backgroundColor","red");
// 3.使用自定义对象 给标签CSS属性赋值
$(".div1").css({"backgroundColor":"green","border":"1px solid red"});

操作CSS属性代码：

<!DOCTYPE html>
<html>
<head>
    <title>操作CSS样式</title>
    <style type="text/css">
        .div1{
            background-color: black;
            width: 200px;
            height: 200px;

        }
    </style>
</head>
<body>
    <div class="div1">

    </div>

    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // 1.获取标签的属性值
        console.log($(".div1").css("width"));
        // 2.给标签的属性赋值
        $(".div1").css("backgroundColor","red");// 将背景颜色改为红色
        // 3.通过自定义对象同时赋多个值
        $(".div1").css({"backgroundColor":"green","border":"1px solid red"});
    </script>
</body>
</html>

操作CSS属性demo

三、标签定位相关操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
　　()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>操作元素的位置</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        .div1{
            background-color: red;
            width: 100px;
            height: 100px;
            position: relative;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="div1">

    </div>

    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // 1.获取匹配元素    在当前窗口的   相对偏移或设置元素位置
        console.log($("div.div1").offset()); // 相对于当前的窗口，元素的偏移量
        // 2.获取匹配元素相对父元素的偏移
        console.log($("div.div1").position());// 他的父元素就是body
        // 3.获取匹配元素相对滚动条顶部的偏移
        console.log($("div.div1").scrollTop());
        // 4.获取匹配元素相对滚动条左侧的偏移
        console.log($("div.div1").scrollLeft());
    </script>
</body>
</html>

获取标签元素的position

返回顶部代码：

<!DOCTYPE html>
<html>
<head>
    <title>返回顶部</title>
    <style type="text/css">
        .div1{
            margin: 0 auto;
            width: 1000px;
            height: 300px;
        }
        .backtop{
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 50px;
            font-size: 10px;
            position: fixed;
            bottom: 10px;
            right: 10px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <button class="backtop hide">返回顶部</button>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <div class="div1">
        1<br>    </div>
    <br>
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(window).scroll(function () {
            // body...
            if ($(window).scrollTop()>100){
                $(".backtop").removeClass("hide");
            }else{
                $(".backtop").addClass("hide");
            }
        })
        $(".backtop").on("click",function () {
            // body...
            $(window).scrollTop(0);
        })
    </script>
</body>
</html>

返回顶部示例

四、标签尺寸相关操作

height()  // 获取内容的宽度
width()   // 获取内同的高度
innerHeight()
innerWidth()
outerHeight()  // 内容+ 两边的边框
outerWidth()

<!DOCTYPE html>
<html>
<head>
    <title>操作尺寸</title>
    <style type="text/css">
        .div1{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
        <div class="div1">

        </div>
        <script src="jquery-3.3.1.js"></script>
        <script type="text/javascript">
            console.log($(".div1").height());
            console.log($(".div1").width());
            console.log($(".div1").innerHeight());
            console.log($(".div1").innerWidth());

            console.log($(".div1").outerHeight());  // 内容高度 + 两边边框
            console.log($(".div1").outerWidth());  // 内容宽度  + 两边的边框
        </script>
</body>
</html>

标签尺寸相关操作