jQuery类和样式操作

DOCTYPE html>
html>
    head>
        meta charset="utf-8">
        title>title>
    head>
    body>
        div id="d1">divdivdiividiviiddvdiv>
        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>