css样式操作

最新推荐文章于 2022-08-23 12:57:46 发布

衰小孩、519

最新推荐文章于 2022-08-23 12:57:46 发布

阅读量81

点赞数

分类专栏： JavaWeb 文章标签： javaweb

本文链接：https://blog.csdn.net/A_JOKER___/article/details/121160309

版权

JavaWeb 专栏收录该内容

86 篇文章 0 订阅

订阅专栏

基本操作

addClass() 添加样式
removeClass() 删除样式
toggleClas() 有就删除，没有就添加样式。
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{
            border: 2px white solid;
        }
        div.redDiv{
            background-color: red;
        }
        div.blueBorder{
            border: 5px blue solid;
        }
    </style>
    <script type="text/javascript"src="../jQuery包/jquery.min.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 blueBorder")
            });

            $('#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>
<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>

衰小孩、519

关注

0
点赞
踩
0

收藏

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

基本操作addClass() 添加样式removeClass() 删除样式toggleClas() 有就删除，没有就添加样式。offset() 获取和设置元素的坐标。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css
复制链接

扫一扫

专栏目录