JQuery玩转Css样式

  1. //1、获取和设置样式  
  2.   
  3. $("#tow").attr("class")获取ID为tow的class属性  
  4.   
  5. $("#two").attr("class","divClass")设置Id为two的class属性。  
  6.   
  7. //2、追加样式  
  8.   
  9. $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2  
  10.   
  11. //3、移除样式  
  12.   
  13. $("#two").removeClass("divClass")移除 ID为two的对象的class名为divClass的样式。  
  14.   
  15. $(#two).removeClass("divClass divClass2")移除多个样式。  
  16.   
  17. //4、切换类名  
  18.   
  19. $("#two").toggleClass("anotherClass") //重复切换anotherClass样式  
  20.   
  21. //5、判断是否含有某项样式  
  22.   
  23. $("#two").hasClass("another")==$("#two").is(".another");  
  24.   
  25. //6、获取css样式中的样式  
  26.   
  27. $("div").css("color") 设置color属性值. $(element).css(style)  
  28.   
  29. //设置单个样式  
  30.   
  31. $("div").css("color","red")  
  32.   
  33. //设置多个样式  
  34.   
  35. $("div").css({fontSize:"30px",color:"red"})  
  36.   
  37. $("div").css("height","30px")==$("div").height("30px")  
  38.   
  39. $("div").css("width","30px")==$("div").height("30px")  
  40.   
  41. //7.offset()方法  
  42.   
  43. //它的作用是获取元素在当前视窗的相对偏移,其中返回对象包含两个属性,即top和left 。  
  44.   
  45. //注意:只对可见元素有效。  
  46.   
  47. var offset=$("div").offset();  
  48.   
  49. var left=offset.left;         //获取左偏移  
  50.   
  51. var top=offset.top;        //获取右偏移  
  52.   
  53. //8、position()方法  
  54.   
  55. //它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,与offset()一样,它返回的对象也包括两个属性即top和left。  
  56.   
  57. //9、scrollTop()方法和scrollLeft()方法  
  58.   
  59. $("div").scrollTop();        //获取元素的滚动条距顶端的距离。  
  60.   
  61. $("div").scrollLeft();         //获取元素的滚动条距左侧的距离。  
  62.   
  63. //10、jQuery中的 toggle和slideToggle 方法,都可以实现对一个元素的显示和隐藏。区别是:  
  64.   
  65. //toggle:动态效果为从右至左。横向动作。  
  66.   
  67. //slideToggle:动态效果从下至上。竖向动作。  
  68.   
  69. //比如想实现一个树由下至上收缩的动态效果,就使用slideToggle就ok了。  
  70.   
  71. $('input').attr("readonly",true)//将input元素设置为readonly  
  72. $('input').attr("readonly",false)//去除input元素的readonly属性  
  73. $('input').attr("disabled",true)//将input元素设置为disabled  
  74. $('input').attr("disabled",false)//去除input元素的disabled属性  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值