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");//切换类样式
常见的样式的操作
- 获取与设置宽高
//获取宽和高的属性值---->数字类型 var width=
("#dv").height()*2; //设置元素的宽和高--->参数可以是数字也可以是字符串
("#dv").height(height);
- 获取设置位置
("#dv").offset().top; $("#dv").offset({"left":200,"top":200});
- 获取滚动条高度
(this).scrollTop()
转载于:https://juejin.im/post/5cf20a99e51d45108223fc0d