jQuery 样式操作

jQuery 样式操作

设置样式

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

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

//获取宽和高的属性值---->数字类型
var width=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dv").width()*2;…("#dv").height()*2;
//设置元素的宽和高—>参数可以是数字也可以是字符串
$("#dv").width(width);
$("#dv").height(height);

添加样式

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

$("#dv").addClass(“cls”); 一个样式
$("#dv").addClass(“cls_1 cls_2”); 多个样式

移除样式

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

$(“body”).removeClass(“cls”);
$(“body”).removeClass();

判断是否应用样式

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

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

切换元素样式

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

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

常见的样式的操作

1. 获取与设置宽高

//获取宽和高的属性值---->数字类型
var width=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dv").width()*2;…("#dv").height()*2;
//设置元素的宽和高—>参数可以是数字也可以是字符串
$("#dv").width(width);
$("#dv").height(height);

2. 获取设置位置

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

3. 获取滚动条高度

$(this).scrollLeft()
$(this).scrollTop()