jQuery 样式操作

jQuery 样式操作

设置样式

• .css() 为标签添加样式
  • .css( "属性" , "属性值" )
  • .css( "属性" , "属性值").css( "属性" , "属性值" )
  • .css( {"属性" : "属性值" } )

("#dv").css("background","red").css("background","red"); $("#dv").css( { "background" : "red" , "width" : "20px"} );

//获取宽和高的属性值---->数字类型 var width=("#dv").height()*2; //设置元素的宽和高--->参数可以是数字也可以是字符串 ("#dv").height(height);

添加样式

• .addClass() 为元素添加类样式
  • addClass(" 类样式名字 ")； 添加一个类样式
  • addClass(" 类样式名字1 类样式名字2 ")； 添加多个类样式
  • 注意：添加多个样式的时候 中间以空格隔开

("#dv").addClass("cls_1 cls_2"); 多个样式

移除样式

• removeClass() 移除样式
  • removeClass( " 类样式名字 " )； 移除类样式
  • removeClass( ) 移除当前元素所有的样式

("body").removeClass();

判断是否应用样式

• hasClass() 判断当前元素是否应用了某个类样式
  • hasClass( " 类样式名字 " )

var result=$("#dv").hasClass("cls"); 返回值为：==true==、==false==

切换元素样式

• toggleClass(); 切换元素的类样式
  • toggleClass( " 类样式名字 ");
  • 注意：该方法可以添加和移除类样式 多次操作

$("body").toggleClass("cls");//切换类样式

常见的样式的操作

1. 获取与设置宽高

//获取宽和高的属性值---->数字类型 var width=("#dv").height()*2; //设置元素的宽和高--->参数可以是数字也可以是字符串 ("#dv").height(height);

2. 获取设置位置

("#dv").offset().top; $("#dv").offset({"left":200,"top":200});

3. 获取滚动条高度

(this).scrollTop()

转载于:https://juejin.im/post/5cf20a99e51d45108223fc0d