Methods for manipulating Css styles in JQuery

  • 2020-03-30 01:43:53
  • OfStack

//1. Gets and sets the style 
$("#tow").attr("class") To obtain ID for tow the class attribute 
$("#two").attr("class","divClass") Set up the Id for two the class Properties. 
//2. Append style 
$("#two").addClass("divClass2") for ID for two Append the style to the object divClass2
//3. Remove style 
$("#two").removeClass("divClass") remove  ID for two The object of class called divClass Style. 
$(#two).removeClass("divClass divClass2") Remove multiple styles. 
//4. Switch class name 
$("#two").toggleClass("anotherClass") //Repeat switching the anotherClass style
//5. Determine if there is a style 
//6. Gets the style  in the CSS style
$("div").css("color")  Set up the color Attribute values . $(element).css(style)
//Set a single style
//Set multiple styles
//7. Offset () method < / STRONG >
//It gets the relative offset of the element in the current window, where the return object contains two attributes, top and left.
//Note: only valid for visible elements.
var offset=$("div").offset();
var left=offset.left;         //Get left offset
var;        //Get right offset
//8. Position () method
//Its purpose is to get the relative offset of the element relative to the grandparent node whose most recent position style property is set to relative or absolute. Like offset(), the object it returns includes two properties, top and left.
//9. ScrollTop () method and scrollLeft() method 
$("div").scrollTop();        //Gets the distance from the top of the element's scroll bar.
$("div").scrollLeft();         //Gets the distance to the left of the element's scroll bar.
//10. Toggle and slideToggle methods in jQuery can both show and hide an element. The difference is: 
//Toggle: the dynamic effect is from right to left. Lateral motion.
//SlideToggle: dynamic effects from the bottom up. Portrait action.
//For example, if you want to achieve a dynamic effect of tree shrinking from bottom to top, you can use slideToggle.
$('input').attr("readonly",true)//Set the input element to readonly
$('input').attr("readonly",false)//Remove the readonly attribute from the input element
$('input').attr("disabled",true)//Set the input element to disabled
$('input').attr("disabled",false)//Removes the disabled attribute from the input element

Related articles: