Home > Web Front-end > JS Tutorial > Detailed explanation of jQuery's method of adding styles to elements_jquery

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

WBOY
Release: 2016-05-16 15:22:38
Original
1371 people have browsed it

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属性。

Copy after login

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")//移除多个样式。

Copy after login

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")

Copy after login

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; //获取右偏移

Copy after login

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(); //获取元素的滚动条距左侧的距离。

Copy after login

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属性

Copy after login

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template