Detailed explanation of jQuery's method of adding styles to elements_jquery

The example in this article describes how to add styles to elements with jQuery. Share it with everyone for your reference, the details are as follows:

1. Get and set styles

$("#tow").attr("class")//获取ID为tow的class属性
$("#two").attr("class","divClass")//设置Id为two的class属性。

2. Add styles

Copy code The code is as follows:

$("#two").addClass("divClass2")//is the ID Add style divClass2

to the object of two

3. Remove styles

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

4. Switch class name

Copy code The code is as follows:

$("#two").toggleClass("anotherClass") // Repeat switching anotherClass style

5. Determine whether a certain style is included

Copy code The code is as follows:

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

6. Get the style in css style

Copy code The code is as follows:

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

Set a single style

Copy code The code is as follows:

$("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; //获取左偏移
var top=offset.top; //获取右偏移

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(); //获取元素的滚动条距顶端的距离。
$("div").scrollLeft(); //获取元素的滚动条距左侧的距离。

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: dynamic effect 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)//将input元素设置为readonly
$('input').attr("readonly",false)//去除input元素的readonly属性
$('input').attr("disabled",true)//将input元素设置为disabled
$('input').attr("disabled",false)//去除input元素的disabled属性

I hope this article will be helpful to everyone in jQuery programming.