zoukankan      html  css  js  c++  java
  • JQuery中操作Css样式的方法

    //1、获取和设置样式

    $("#tow").attr("class")获取ID为tow的class属性

    $("#two").attr("class","divClass")设置Id为two的class属性。

    //2、追加样式

    $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2

    //3、移除样式

    $("#two").removeClass("divClass")移除 ID为two的对象的class名为divClass的样式。

    $(#two).removeClass("divClass divClass2")移除多个样式。

    //4、切换类名

    $("#two").toggleClass("anotherClass") //重复切换anotherClass样式

    //5、判断是否含有某项样式

    $("#two").hasClass("another")==$("#two").is(".another");

    //6、获取css样式中的样式

    $("div").css("color") 设置color属性值. $(element).css(style)

    //设置单个样式

    $("div").css("color","red")

    //设置多个样式

    $("div").css({fontSize:"30px",color:"red"})

    $("div").css("height","30px")==$("div").height("30px")

    $("div").css("width","30px")==$("div").height("30px")

    //7.offset()方法

    //它的作用是获取元素在当前视窗的相对偏移,其中返回对象包含两个属性,即top和left 。

    //注意:只对可见元素有效。

    var offset=$("div").offset();

    var left=offset.left;         //获取左偏移

    var top=offset.top;        //获取右偏移

    //8、position()方法

    //它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,与offset()一样,它返回的对象也包括两个属性即top和left。

    //9、scrollTop()方法和scrollLeft()方法

    $("div").scrollTop();        //获取元素的滚动条距顶端的距离。

    $("div").scrollLeft();         //获取元素的滚动条距左侧的距离。

    //10、jQuery中的 toggle和slideToggle 方法,都可以实现对一个元素的显示和隐藏。区别是:

    //toggle:动态效果为从右至左。横向动作。

    //slideToggle:动态效果从下至上。竖向动作。

    //比如想实现一个树由下至上收缩的动态效果,就使用slideToggle就ok了。

    $('input').attr("readonly",true)//将input元素设置为readonly
    $('input').attr("readonly",false)//去除input元素的readonly属性
    $('input').attr("disabled",true)//将input元素设置为disabled
    $('input').attr("disabled",false)//去除input元素的disabled属性

  • 相关阅读:
    PHP保留小数的相关方法
    ASP.NET Core MVC 之过滤器(Filter)
    ASP.NET Core MVC 之控制器(Controller)
    ASP.NET Core MVC 之视图组件(View Component)
    ASP.NET Core MVC 之局部视图(Partial Views)
    标签助手(TagHelper)
    ASP.NET Core MVC 之布局(Layout)
    ASP.NET Core MVC 之视图(Views)
    ASP.NET Core MVC 之模型(Model)
    九卷读书:淘宝从小到大的发展 -重读《淘宝技术这十年》
  • 原文地址:https://www.cnblogs.com/tongzhou/p/6795300.html
Copyright © 2011-2022 走看看