web基础学习笔记(十九)之jquery-css的样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 260px;
        }
        div.whiteborder{    /*前面是标签名(用来限制给谁使用),后面是标签选择器*/
            border: 2px white solid;
        }
        div.redDiv{
            background-color: red;
        }
        div.blueBorder{
            border: 5px blue solid;
        }
    </style>
    <script src="jquery/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var $divEle = $('div:first');
            $('#btn01').click(function () {
                //addClass()    向被选元素添加一个或多个类
                $divEle.addClass('redDiv blueBorder');
            });
            $('#btn02').click(function () {
                //removeClass()    向被选元素删除一个或多个类
                $divEle.removeClass('redDiv');
            });
            $('#btn03').click(function () {
                //toggleClass()    对被选元素进行添加删除类的切换操作
                $divEle.toggleClass('redDiv');
            });
            $('#btn04').click(function () {
                //offset()    返回第一个匹配元素相当于文档的位置
                var pos = $divEle.offset();
                console.log(pos);
                $divEle.offset({
                    top:100,    /*按照当前窗口大小进行调整*/
                    left:50
                });
            });
        });

    </script>
</head>
<body>
    css样式操作
<!--
addClass()  添加样式
removeClass()   删除样式
toggleClass()   有就删除没有就添加
offset()    获取和设置元素的坐标
-->

<table align="center">
    <tr>
        <td>
            <div class="border"></div>
        </td>

        <td>
            <div class="btn">
                <input type="button" value="addClass()" id="btn01">
                <input type="button" value="removeClass()" id="btn02">
                <input type="button" value="toggleClass()" id="btn03">
                <input type="button" value="offset()" id="btn04">
            </div>
        </td>
    </tr>
</table>
</body>
</html>
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页