jQuery-css样式操作练习

最新推荐文章于 2022-04-07 14:54:26 发布

司空不见惯

最新推荐文章于 2022-04-07 14:54:26 发布

阅读量111

点赞数

分类专栏： JavaWeb学习

本文链接：https://blog.csdn.net/qq_44961203/article/details/112062146

版权

JavaWeb学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简单对css样式的一些操作

主要有以下三个方法：

（1）addClass() 向被选元素添加一个或多个类。
（2）removeClass() 从被选元素删除一个或多个类。
（3）toggleClass() 对被选元素进行添加/删除类的切换操作(有就删，没有就加)。
（4）offset() 获取和设置元素坐标(坐标有时候会与当前浏览器窗口大小有关系)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width:100px;
            height:260px;
        }

        div.whiteBorder{  /*标签名.类名选择器  限定当前样式只给div使用*/
            border:2px white solid;
        }

        div.redDiv{
            background-color: red;
        }

        div.bludBorder{
            border:5px blue solid;
        }
    </style>

</head>

<!--<script type="text/javascript" src="04_jQuery/Demo/script/jquery-3.2.1.js"></script>-->
<script  type="text/javascript" src="../../script/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    
    $(function () {

    var $divEle=$('div:first');  //查找第一个div
    
    //绑定按钮btn01单击事件
    $('#btn01').click(function () {
            //addClass() 向被选元素添加一个或多个类
            $divEle.addClass('redDiv bludBorder');
        });

    //绑定按钮btn02单击事件
    $('#btn02').click(function () {
            //removeClass() 从被选元素删除一个或多个类
            $divEle.removeClass('redDiv');
        });

    //绑定按钮btn03单击事件
    $('#btn03').click(function () {
            //toggleClass() 对被选元素进行添加/删除类的切换操作  （有就删，没有就加）
            $divEle.toggleClass('redDiv');
        });

    //绑定按钮btn04单击事件
    $('#btn04').click(function () {
            //offset() 获取和设置元素坐标（坐标有时候会与当前浏览器窗口大小有关系）
            var post = $divEle.offset();
            // console.log(post);//F12控制台输出

        //给元素坐标赋值
        $divEle.offset({
           top:50,
            left:100
        });
        });


  })

</script>

<body>
    <table>
        <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>

司空不见惯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-css样式操作练习

简单对css样式的一些操作主要有以下三个方法：（1）addClass() 向被选元素添加一个或多个类。（2）removeClass() 从被选元素删除一个或多个类。（3）toggleClass() 对被选元素进行添加/删除类的切换操作(有就删，没有就加)。（4）offset() 获取和设置元素坐标(坐标有时候会与当前浏览器窗口大小有关系)。<!DOCTYPE html><html lang="en"><head> <meta charset=
复制链接

扫一扫

专栏目录