jQuery style operations

jQuery style operations

Setting styles

• .css () to add style to the label
  • .css ( "attribute", "attribute value")
  • .css ( "attribute", "attribute value") .css ( "attribute", "attribute value")
  • .css ({ "Properties": "attribute value"})

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

// Get the width and height attribute values ----> numeric width = var ( "#dv") height () * 2;. // set the width and height of elements ---> parameter may be a digital string ( "#dv") height (height ).;

Adding Style

• .addClass () to add elements like style
  • addClass ( "class style name"); add a class style
  • . addClass ( "Class 1 Class Style name Style name 2"); a plurality of class styles added
  • Note: the middle to add more than one style when separated by a space

( "#Dv") addClass ( "cls_1 cls_2");. More style

Remove Style

• removeClass () to remove the style
  • removeClass ( "class style name"); remove the class styles
  • removeClass () Removes all of the elements of the current style

("body").removeClass();

Whether to apply the style

• hasClass () to determine whether the current element is applied to a class style
  • hasClass ( "class style name")

var result = $ ( "# dv") hasClass ( "cls"); return value:. == true ==, == false ==

Switching element styles

• Style type switching element; toggleClass ()
  • toggleClass ( "class style name");
  • Note: This method can add and remove multiple operating class styles

$ ( "Body") toggleClass ( "cls");. // class switching pattern

Common-style operation

1. Get the width and height provided

// Get the width and height attribute values ----> numeric width = var ( "#dv") height () * 2;. // set the width and height of elements ---> parameter may be a digital string ( "#dv") height (height ).;

2. Get Set location

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

3. Gets the height of the scroll bar

(this).scrollTop()

Reproduced in: https: //juejin.im/post/5cf20a99e51d45108223fc0d