jQuery操作CSS方法和设置类样式方法

1.操作CSS        ---- $('选择器').css('属性名'，'值')

  参数只写属性名，则返回属性值

<div></div>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
  <script>
    $(function () {
      console.log($('div').css('backgroundColor'));
    })
  </script>

 

  修改样式（属性名要加引号，值如果是数字则可以不跟单位，不加引号）

将上面的代码中script部分更改，结果div的颜色变成红色了

$(function () {
      $('div').css('backgroundColor', 'red');
})

 

  参数可以是对象形式，方便设置多组样式 

将上面代码修改

 <div>这里是div</div>

<script>
    $(function () {
      $('div').css({ 'backgroundColor': 'blue', 'color': '#fff' });
    })
</script>

 

   属性名可以不用加引号，复合属性采用驼峰命名法

上面的代码这样写也是同样的效果

$(function () {
      $('div').css({
        color: '#fff',
        backgroundColor: 'blue'
      });
 })

2.设置类样式

先准备一个盒子，并准备一个类(current)

<div></div>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .current {
      background-color: red;
    }
  </style>

 

1.添加类      addClass('类名')   （类名不用加点）

<script>
    $(function () {
      $('div').addClass('current')
    })
</script>

 2.删除类    removeClass('类名')

$(function () {
      $('div').addClass('current');
      $('div').removeClass('current')
})

 

 3.切换类      toggleClass('类名')

    （如果div有这个类名则会去掉，如果没有就添加）  （以下例子当点击时切换）

<script>
    $(function () {
      $('div').click(function () {
        $(this).toggleClass('current');
      })
    })
</script>

 

 类操作与className的区别

        className会覆盖原先的类名

        而jQuery里面的类操作只是对指定的类进行操作，不影响原先的类