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

最新推荐文章于 2022-06-11 11:50:59 发布

weixin_44014196

最新推荐文章于 2022-06-11 11:50:59 发布

阅读量81

点赞数

分类专栏： web学习文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44014196/article/details/108811095

版权

web学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!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>

weixin_44014196

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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.whiteb
复制链接

扫一扫