jquery样式操作

Devops海洋的渔夫

发布于 2019-05-30 21:59:06

1.6K00

代码可运行

文章被收录于专栏：Devops专栏Devops专栏

运行总次数：0

代码可运行

jquery用法思想

同一个函数完成取值和赋值

操作行间样式

// 获取div的样式
$("div").css("width");
$("div").css("color");

//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

特别注意

选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。

操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

编写一个点击按钮，切换div样式的示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){

            $('input').click(function(){
                // alert('点击');
                $('div').css({'background':'cyan'});
                // $('div').addClass("big");
                $('div').toggleClass('big');
            })
        })
    </script>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background: gold;
        }

        .big{
            width: 500px;
            height: 500px;
        }
        
    </style>
</head>
<body>
    <input type="button" name="" value="切换">
    <div>1</div>
</body>
</html>