jq 操作元素样式-蒲公英云

jq 操作元素样式

短命女 2021-07-24 14:35 528阅读 0赞

**返回css样式内容**
    对象数组.css("样式名")
            function t2()
        {
            var showdiv=$("#showdiv");
            alert(showdiv.css("width"));
        }
        js.style方法不能获取写在css代码域内的样式
**增加/修改样式**
        数值可以不加px，如要加需要'400px' 括起来
    对象数组.css("样式名","修改样式")
            function t1()
        {
            var showdiv=$("#showdiv");
            //操作样式
            showdiv.css("background-color","red");
        }
    在原值基础上修改    
        对象数组.css('样式名','+=200');    在原来基础上增加200px
**增加多个样式**
    数值可以不加px，如要加需要'400px' 括起来
    对象数组.css({"样式名":"样式值","样式名":"样式值","样式名":"样式值"...})
            function t3()
        {
            var div=$("#div01");
            div.css({"border":"solid 2px orange","width":"300px","height":"200px"});
        }
**通过类选择器添加样式**
    对象数组.addClass("类选择器名")
            function t4()
        {
            var div=$("#div01");
            div.addClass("common");
        }
**移除类选择器样式**
    对象数组.removeClass("类选择器名")
            function t5()
        {
            var div=$("#div01");
            div.removeClass("common");
        }

代码示例:

<html>
    <head>
        <meta charset="utf-8">
        <title>jq 操作元素样式</title>
        <script type="text/javascript" charset="utf-8" src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            function t1()
            { 
                var showdiv=$("#showdiv");
                //操作样式
                showdiv.css("background-color","red");
            }
            function t2()
            { 
                var showdiv=$("#showdiv");
                alert(showdiv.css("width"));
            }
            function t3()
            { 
                var div=$("#div01");
                div.css({ "border":"solid 2px orange","width":"300px","height":"200px"});
            }
            function t4()
            { 
                var div=$("#div01");
                div.addClass("common");
            }
            function t5()
            { 
                var div=$("#div01");
                div.removeClass("common");
            }
        </script>
        <style type="text/css">
            #showdiv{ 
                width:100px;
                height:200px;
                border:solid 2px;
            }
            .common{ 
                width:100px;
                height:200px;
                border:solid 2px;
                background-color: purple;
            }
        </style>
    </head>
    <body>
        <input type="button" value="修改样式" onclick="t1()"/>
        <input type="button"  value="返回样式" onclick="t2()"/>
        <input type="button"  value="操作多个样式" onclick="t3()"/>
        <input type="button" value="操作类选择器"  onclick="t4()"/>
        <input type="button"  value="移除类选择器样式" onclick="t5()" />
        <hr/>
        <div id="showdiv" >
        </div>
        <div id="div01" class="common">
        </div>
    </body>
</html>