jQery 操作CSS

jQuery操作CSS也是很方便的，咱先看看这几个常用的方法：

  • addClass()：向一个元素添加一个或者多个类。
  • removeClass()：从一个元素中删除一个类或多个类。
  • toggleClass：对元素进行 添加/删除(切换方式) 某个类。
  • css()：设置或返回元素的css样式。

 

 

 1 添加Class

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style type="text/css">
        .red{
            color : red;
        }
        .paragraph{
            font-weight: bold;
            font-size: xx-large;
        }
    </style>
</head>
<body>
<div class="demo">
    <p id="p1">一些内容</p>
    <p id="p2">另一个文本</p>
</div>

<button id="btn1">添加Class</button>
</body>
{{--js--}}
<script>
    $(document).ready(function() {
        $("#btn1").click(function () {
            $("#p1,#p2").addClass("red paragraph");
        });
    });
</script>
</html>

 

 

 2 删除Class

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style type="text/css">
        .red{
            color : red;
        }
        .paragraph{
            font-weight: bold;
            font-size: xx-large;
        }
    </style>
</head>
<body>
<div class="demo">
    <p id="p1" class="red paragraph">一些内容</p>
    <p id="p2" class="red paragraph">另一个文本</p>
</div>

<button id="btn1">删除Class</button>
</body>
{{--js--}}
<script>
    $(document).ready(function() {
        $("#btn1").click(function () {
            $("#p1,#p2").removeClass("red paragraph");
        });
    });
</script>
</html>

 

 

 3 切换Class

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style type="text/css">
        .red{
            color : red;
        }
        .paragraph{
            font-weight: bold;
            font-size: xx-large;
        }
    </style>
</head>
<body>
<div class="demo">
    <p id="p1" class="red paragraph">一些内容</p>
    <p id="p2" class="red paragraph">另一个文本</p>
</div>

<button id="btn1">切换Class</button>
</body>
{{--js--}}
<script>
    $(document).ready(function() {
        $("#btn1").click(function () {
            $("#p1,#p2").toggleClass("red paragraph");
        });
    });
</script>
</html>

 

 

 4 设置或返回CSS

 4.1 返回CSS

返回一个css 我们只需要在css方法中写出要获取的css类型就好。

    $(document).ready(function() {
        $("#btn1").click(function () {
            alert($("#p1").css("background-color"));
        });
    });

 4.2 设置CSS

我们可以设置一个或多个css样式：

<script>
    $(document).ready(function() {
        $("#btn1").click(function () {
            $("#p1").css("background-color", "black");
            $("#p2").css({"background-color": "black", "color": "white"});
        });
    });
</script>

 

posted @ 2017-09-19 14:10  Sky_sunkang  阅读(158)  评论(0)  编辑  收藏  举报