jQuery 样式操作

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

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=("\#dv").width()\*2; var height=(“#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=("\#dv").width()\*2; var height=(“#dv”).height()*2; //设置元素的宽和高—->参数可以是数字也可以是字符串 ("\#dv").width(width);(“#dv”).height(height);

  1. 获取设置位置

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

  1. 获取滚动条高度

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

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

发表评论

表情：
评论列表 （有 0 条评论，278人围观）

还没有评论，来说两句吧...

相关阅读