首页 / JQUERY / jQuery的css样式操作

jQuery的css样式操作

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery的css样式操作，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1275字，纯文字阅读大概需要2分钟。

内容图文

jQuery的css样式操作

addClass() 添加样式

removeClass() 删除样式

toggleClass() 有就删除，没有就添加样式

offset() 获取和设置元素的坐标

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <style>
        div{
            width:100px;
            height:260px;
        }
        div.whiteborder{
            border:2px white solid;
        }
        div.redDiv{
            background-color:red;
        }
        div.blueBorder{
            border: 5px blue solid;
        }
        table{
            margin: 1px auto 1px auto;
        }
    </style>
    <!--引入jQuery库-->
    <script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
    <script type="text/javascript">
      
      $(function(){
        var $divEle=$("div:first");
        $("#btn01").click(function(){
            //addClsss
            $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
            });
            console.log(pos);
        });
      });

      
    </script>
    </head>
    <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>

内容总结

以上是互联网集市为您收集整理的jQuery的css样式操作全部内容，希望文章能够帮你解决jQuery的css样式操作所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1002806.html

来源：【匿名】