jQuery操作样式笔记

jQuery操作样式

css操作

• 功能：设置或者修改样式，操作的是style属性

设置单个样式

    //name：需要设置的样式名称
    //value：对应的样式值
    css(name, value);
    //使用案例
    $("#one").css("background","gray");//将背景色修改为灰色

设置多个样式

    //参数是一个对象，对象中包含了需要设置的样式名和样式值
    css(obj);
    //使用案例
    $("#one").css({
        "background":"gray",
        "width":"400px",
        "height":"200px"
    });

获取样式

    //name:需要获取的样式名称
    css(name);
    //案例
    $("div").css("background-color");

• 注意：获取样式操作只会返回第一个元素对应的样式值。

class操作

添加样式类

    //name：需要添加的样式类名，注意参数不要带点.
    addClass(name);
    //例子,给所有的div添加one的样式。
    $("div").addClass("one");

移除所有样式类

    //不带参数，移除所有的样式类
    removeClass()
    //例子，移除div所有的样式类
    $("div").removeClass();

移除单个样式类

    //name:需要移除的样式类名
    removeClass("name");
    //例子，移除div中one的样式类名
    $("div").removeClass("one");

判断是否有样式类

    //name:用于判断的样式类名，返回值为true false
    hasClass(name)
    //例子，判断第一个div是否有one的样式类
    $("div").hasClass("one");

切换样式类

    //name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
    toggleClass(name);
    //例子
    $("div").toggleClass("one");

• 经验总结：

1.如果操作到的样式非常少，可以考虑css方法

2.如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个class类里面。

3.如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操作。