jQuery 样式操作

桃扇骨 2022-10-01 08:00 213阅读 0赞

## jQuery 样式操作 ##

### 设置样式 ###

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

> ![("\#dv").css("background","red");][dv_.css_background_red]("\#dv").css("background","red").css("background","red"); $("\#dv").css( \{ "background" : "red" , "width" : "20px"\} );
> 
> //获取宽和高的属性值---->数字类型 var width=![("\#dv").width()\*2; var height=][dv_.width_2_ var height]("\#dv").height()\*2; //设置元素的宽和高--->参数可以是数字也可以是字符串 ![("\#dv").width(width);][dv_.width_width]("\#dv").height(height);

### 添加样式 ###

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

> ![("\#dv").addClass("cls");     一个样式][dv_.addClass_cls_]("\#dv").addClass("cls\_1 cls\_2"); 多个样式

### 移除样式 ###

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

> ![("body").removeClass("cls");][body_.removeClass_cls]("body").removeClass();

### 判断是否应用样式 ###

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

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

### 切换元素样式 ###

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

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

### 常见的样式的操作 ###

1.  获取与设置宽高

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

1.  获取设置位置

> ![("\#dv").offset().left;][dv_.offset_.left]("\#dv").offset().top; $("\#dv").offset(\{"left":200,"top":200\});

1.  获取滚动条高度

> ![(this).scrollLeft()][this_.scrollLeft](this).scrollTop()

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

[dv_.css_background_red]: /images/20220118/d0928622672b46bdb17f9a3a74c99d3c.png
[dv_.width_2_ var height]: https://juejin.im/equation?tex=%28%22%23dv%22%29.width%28%29*2%3B%0Avar%20height%3D
[dv_.width_width]: /images/20220118/7b44aad75295426084a0101e5d582946.png
[dv_.addClass_cls_]: /images/20220118/66a22e4859ae419a89026430d9f358cf.png
[body_.removeClass_cls]: /images/20220118/ff350ed5dde94723a4ca03d6b1091bfb.png
[dv_.offset_.left]: /images/20220118/a8f35fffdae14e2a91eda8e5a47730f6.png
[this_.scrollLeft]: /images/20220118/262b58c7f5114bf1b9d0a6cdd1e96429.png