jq+css

最新推荐文章于 2022-10-05 11:00:19 发布

love-study-lele

最新推荐文章于 2022-10-05 11:00:19 发布

阅读量321

点赞数

分类专栏： jq

本文链接：https://blog.csdn.net/qq_40639990/article/details/78275841

版权

jq 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jq添加样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>css操作</title>
    <style>
      .back{
        width: 500px;
        height: 500px;
        background: pink;
      }

      .color_red {
        color: red;
      }

    .content{
        width:500px;
        height:500px;
        background:black;
       }

    </style>
  </head>
  <body>

    <div class="one">hjjhdjhkjhk</div>
    <div class="one">hjjhdjhkjhk</div>
    <div class="one">hjjhdjhkjhk</div>
    <div class="one">hjjhdjhkjhk</div>

    <script src="../jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript">

    // $(".one").css("width", "500px");
    // $(".one").css("height", "500px");
    // $(".one").css("background", "pink");

    /*
    //一次性设置多个
    $(".one").css({
      "width": "500px",
      "height": "500px",
      "background": "pink"
    });
    */


    //使用addClass来添加样式最方便
    $(".one").addClass("back color_red");

    //使用removeClass来移除样式
    $(".one").removeClass("color_red back");


    //有类就删除，没有就添加
    $(".one").toggleClass("back");





    //获取样式
    console.log($(".one").css("width"));//获取width
    console.log($(".one").css("height"));//获取height
    console.log($(".one").css("background-color"));

    //返回一个包含指定属性的对象
    console.log($(".one").css(["width", "height", "background-color"]));



  $('.one').css({'width':"500px",
        'height':'300px','background':'pink'})
// 如果上面添加了css下面添加一样的样式是没有用的
    $('.one').addClass('content');












    </script>

  </body>
</html>

love-study-lele

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq+css

jq添加样式 css操作 .back{ width: 500px; height: 500px; background: pink; } .color_red { color: red; } .content{ width:
复制链接

扫一扫