Methods of manipulating CSS styles in JQuery_jquery

Copy code The code is as follows:

//1. Get and set styles

$("#tow").attr("class") gets the class attribute with ID tow

$("#two").attr("class","divClass") sets the class attribute with Id as two.

//2. Additional styles

$("#two").addClass("divClass2") adds style divClass2 to the object with ID two

//3. Remove style

$("#two").removeClass("divClass") removes the style named divClass of the object with ID two.

$(#two).removeClass("divClass divClass2") removes multiple styles.

//4. Switch class name

$("#two").toggleClass("anotherClass") // Repeatedly switch anotherClass style

//5. Determine whether a certain style is included

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

//6. Get the style in css style

$("div").css("color") Set the color attribute value. $(element).css(style)

//Set a single style

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

//Set multiple styles

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

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

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

//7.offset() method

// Its function is to obtain the relative offset of the element in the current view window, where the returned object contains two attributes, namely top and left.

//Note: Only valid for visible elements.

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

var left=offset.left; //Get the left offset

var top=offset.top; //Get the right offset

//8. position() method

// Its function is to obtain the relative offset of the element relative to the nearest grandparent node whose position style attribute is set to relative or absolute. Like offset(), the object it returns also includes two attributes, top and left.

//9. scrollTop() method and scrollLeft() method

$("div").scrollTop(); //Get the distance between the scroll bar of the element and the top.

$("div").scrollLeft(); //Get the distance between the scroll bar of the element and the left side.

//10. The toggle and slideToggle methods in jQuery can both display and hide an element. The difference is:

//toggle: The dynamic effect is from right to left. Lateral movements.

//slideToggle: The dynamic effect is from bottom to top. Vertical action.

//For example, if you want to achieve a dynamic effect of a tree shrinking from bottom to top, just use slideToggle.

$('input').attr("readonly",true)//Set the input element to readonly
$('input').attr("readonly",false)//Remove the input element readonly attribute
$('input').attr("disabled",true)//Set the input element to disabled
$('input').attr("disabled",false)//Remove input The disabled attribute of the element