样式属性操作 .css()

作用:设置或获取元素的样式属性值。

  • 设置样式属性操作:

    • a设置单个样式:
      $(selector).css(“color”, “red”);
      // 第一个参数表示:样式属性名称
      // 第二个参数表示:样式属性值
    • b设置多个样式:(也可以设置单个)
      // 参数为 {}(对象)
      $(selector).css({“color”: “red”, “font-size”: “30px”});
  • 获取样式属性操作:

     // 参数表示要获取的 样式属性名称
     $(selector).css(“font-size”);

    此时,会返回”font-size”样式属性对应的值。

    类操作

  • 添加类样式:

    • addClass 为指定元素添加类className,注意:此处类名不带点,所有类操作的方法类名都不带点。$(selector).addClass(“liItem”);
  • 移除类样式:removeClass(className) 为指定元素移除类 className`$(selector).removeClass(“liItem”);$(selector).removeClass(); 不指定参数,表示移除被选中元素的所有类。
  • 判断有没有类样式:hasClass(calssName) 判断指定元素是否包含类 ,jquery对象中有一个带有类名的也是true,所有都不带才是false;className$(selector).hasClass(“liItem”);此时,会返回true或false。
  • 切换类样式:
    toggleClass(className) 为指定元素切换类 className,该元素有类则移除,没有指定类则添加。$(selector).toggleClass(“liItem”);

注意:

  • 操作类样式的时候,所有的类名,都不带点(.)。
  • 操作的样式非常少,那么可以通过.css()这个 方法来操作。
  • 操作的样式很多,那么要通过使用类的方式来操作。
  • 如果考虑以后维护方便(把CSS从js中分离出来)的话,推荐使用类的方式来操作。类比CSS书写位置(把css从html中分离出来)。
Last modification:May 9, 2018
If you think my article is useful to you, please feel free to appreciate