jQuery类和样式操作

2020-04-08 22:04 默默不语阅读(139) 评论(0) 编辑收藏举报

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="d1">divdivdiividiviiddv</div>
        <input type="button" id="add_class" value="添加class" />
        <input type="button" id="del_class" value="删除class" />
        <input type="button" id="add_or_del_class" value="增或删class" />
        <input type="button" id="add_or_del_class_switch" value="增或删class开关" />
        <input type="button" id="add_style" value="添加样式" />
        <input type="button" id="del_style" value="删除样式" />
        
    </body>
    <script type="text/javascript" src="../images/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        document.getElementById("add_class").onclick=function(){
            /* jQuery提供了专门修改class属性的方法 */
            $("#d1").addClass("div1");
        }
        document.getElementById("del_class").onclick=function(){
            /* jQuery提供了专门删除class属性的方法 */
            $("#d1").removeClass("div1");
        }
        document.getElementById("add_style").onclick=function(){
            /* jQuery提供了专门修改样式的方法 */
            $("#d1").css("width","100px");
            $("#d1").css("height","100px");
            $("#d1").css("border","solid 1px red");
            /* jQuery获取某属性的值 */
            var width = $("#d1").css("width");
            alert("d1的width为："+width);
        }
        document.getElementById("del_style").onclick=function(){
            /* jQuery提供了专门删除样式的方法 */
            $("#d1").css("width","");
            $("#d1").css("height","");
            $("#d1").css("border","");
        }
        document.getElementById("add_or_del_class").onclick=function(){
            /* toggleClass:若该类不存在则添加，若该类存在则删除 */
            $("#d1").toggleClass("aaa");
        }
        document.getElementById("add_or_del_class_switch").onclick=function(){
            /* toggleClass:若该类不存在则添加，若该类存在则删除 */
            /* 第二个参数true:增加类，false：删除 */
            $("#d1").toggleClass("aaa",false);
        }
        
    </script>
</html>