码迷,mamicode.com
首页 > Web开发 > 详细

jQuery类和样式操作

时间:2020-04-08 22:32:02      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:ges   删除   head   inpu   参数   put   NPU   方法   back   

<!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>

 

jQuery类和样式操作

标签:ges   删除   head   inpu   参数   put   NPU   方法   back   

原文地址:https://www.cnblogs.com/qilin20/p/12663102.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!