Operate attributes and styles of Elements Using jquery

This document describes how to use jquery to obtain and manipulate attributes and CSS styles of elements.

Element attributes and Dom attributes

For the following tag element:

<IMGID= 'Img'SRC= "1.jpg"ALT= '1'Class= "IMGs"> </IMG> 

We usually call ID, SRC, ALT, and class as attributes, that is, element attributes. however, when the browser parses tag elements, the elements are parsed as DOM objects. Accordingly, the element attributes are parsed as Dom attributes.

Element attributes and Dom attributes are different names when We parse them differently.

It is worth noting that:

1. When an element is parsed into a Dom, the element attributes and Dom attributes are not necessarily the original names.

For example, the class attribute of IMG is class when it is an element attribute, and the class name is classname when it is a DOM attribute.

2. In JavaScript, we can directly obtain or set Dom attributes.

Operate element attributes using jquery

In jquery, the ATTR function is provided to operate on element attributes. The details are as follows:

Function Name	Description	Example
ATTR (name)	ObtainFirstMatches the attribute value of an element.	$ ("Input"). ATTR ("Value")
ATTR (property)	Set an object in the form of "name/value"All matchesElement attributes	$ ("Input"). ATTR ({value:"TXT", Title:"Text"});
ATTR (Key, value)	IsAll matchesElement to set a property value	$ ("Input"). ATTR ("Value","TXT");
ATTR (Key, FN)	IsAll matchesTo set a calculated attribute value.	$ ("Input"). ATTR ("Title",Function(){Return this. Value });
Removeattr (name)	SlaveAll matchesTo delete an attribute.	$ ("Input"). Removeattr ("Value");

Note:

1. To set the class attribute of an object, you must use classname as the attribute name.

2. We can use removeattr to delete element attributes, but its corresponding Dom attributes will not be deleted, but will be changed.

Based on the above functions, we can use this function to obtain the DOM value and innerhtml value:

$ ("# Txt1"). ATTR ("Value") $ ("# Txt1"). ATTR ("Value","1234"); $ ("# Dv1"). ATTR ("Innerhtml",'This is a div'); $ ("# Dv1"). ATTR ("Innerhtml");

In fact, jquery provides a simpler method to access value and innerhtml. The specific functions are as follows:

Function Name	Description	Example
Val ()	Obtains the value of the First Matching Element.	$ ("# Txt1"). Val ()
Val (VAL)	Set Value for matched elements	$ ("# Txt1"). Val ("Txt1")
HTML ()	Obtains the HTML content of the First Matching Element.	$ ("# Dv1"Developer.html ()
HTML (VAL)	Set the HTML content of each Matching Element	$ ("# Dv1"Pai.html ("This is a div")
Text ()	Obtain and connect the content of all matching text nodes.	$ ("Div"). Text ()
Text (VAL)	Set all matching elements to Val	$ ("Div"). Text ("Divs")

Use jquery to operate CSS

1. Modify the CSS class

Function Name	Description	Example
Addclass (classes)	IsEach matchingAdd the specified class name to the element	$ ("Input"). Addclass ("Colorred borderblack");
Hasclass (class)	Determine whether to match the Element SetAt least oneContains the specified CSS class. If one class contains the specified CSS class, true is returned.	Alert ($ ("Input"). Hasclass ("Borderblack"));
Removeclass ([classes])	Removes all or specified CSS classes from the matching element.	$ ("Input"). Removeclass ("Colorred borderblack");
Toggleclass (classes)	If the specified class exists (does not exist), delete (ADD) the specified class.	$ ("Input"). Toggleclass ("Colorred borderblack");
Toggleclass (classes, switch)	If switch is true, add a class. If switch is false, delete the class.	$ ("Input"). Toggleclass ("Colorred borderblack",True);

Note:

1. addclass, removeclass, and toggleclass can be added with multiple classes separated by spaces.

2. The removeclass method has optional parameters. If a parameter exists, the specified class is deleted. If no parameter exists, all classes matching the element are deleted.

3. When toggleclass (classes, switch) is called, we can have more usage, such:

 
// Add a style when the button is clicked three timesVaRI = 0; $ ("# BTN"). Click (Function() {$ ("Input"). Toggleclass ("Colorred borderblack",True);});
 

2. Modify the CSS style

Function Name	Description	Example
CSS (name)	AccessFirstMatching Element style attributes	$ ("Input").Css ("Color")
CSS (properties)	Set a "name/value" pair to the style attributes of all matching elements.	$ ("Input").Css ({border:"Solid 3px silver", Color:"Red"})
CSS (name, value)	Set the same style attribute for the Matching Element If it is a number, it is automatically converted to a pixel value.	$ ("Input").Css ("Border-width","5");

Note:

Code example and result of a digital style value:

Example	Source code generated
$ ("Input").Css ("Border-width","5");	<InputStyle="Border-right-Width: 5px;Border-top-Width: 5px;Border-bottom-Width: 5px;Border-left-Width: 5px"ID= "Txt1"/>

Note:

For some common attributes, such as width and height, using ATTR ("width") and CSS ("width") cannot get the value normally. Now, let's introduce some common attributes.

Get common attributes

1. Correlation between width and height

Function Name	Description	Example
Width ()	ObtainFirstThe width of the matching element. The default value is PX.	$ ("# Txt1"). Width ()
Width (VAL)	Set the width of the matched element. The default value is PX.	$ ("# Txt1". Width (200)
Height ()	ObtainFirstThe height of the matching element. The default value is PX.	$ ("# Txt1"). Height ()
Height (VAL)	Set the width of the matched element. The default value is PX.	$ ("# Txt1"). Height (20)
Innerwidth ()	ObtainFirstWidth of the area inside the Matching Element (including padding, excluding Border)	$ ("# Txt1"). Innerwidth ()
Innerheight ()	ObtainFirstMatch the height of the area inside the element (including padding, excluding Border)	$ ("# Txt1"). Innerheight ()
Outerwidth ([margin])	ObtainFirstWidth of the outer area of the matching element (including padding and Border) If margin is true, margin is included; otherwise, margin is not included.	$ ("# Txt1"). Outerwidth ()
Outerheight ([margin])	ObtainFirstMatch the height of the element's external region (including padding and Border) If margin is true, margin is included; otherwise, margin is not included.	$ ("# Txt1"). Outerheight (True)

Note:

The returned height and width are numbers without PX.

It is easier to understand by referring to a graph.

2. Location-related

In designing scripts for pop-up objects, it is often necessary to dynamically obtain the pop-up coordinates and set the positions of elements. jquery provides location-related functions for us.

Function Name	Description	Example
Offset ()	Obtains the relative offset of the matching element in the current window. Valid only for visible elements	$ ("# BTN"). Offset (). top $ ("# BTN"). Offset (). Left
Position ()	Returns the offset of a matched element from its parent element. Valid only for visible elements	$ ("# BTN"). Position (). top $ ("# BTN"). Position (). Left
Scrolltop ()	Obtains the offset of the matching element relative to the top of the scroll bar. Valid for both visible and hidden elements	$ ("Div"). Scrolltop ()
Scrolltop (VAL)	Set the vertical scroll bar top offset to this value Valid for both visible and hidden elements	$ ("Div"). Scrolltop (200)
Scrollleft ()	Returns the offset of the matching element to the left of the scroll bar. Valid for both visible and hidden elements	$ ("Div"). Scrollleft ()
Scrollleft (VAL)	Set the offset on the left of the horizontal scroll bar Valid for both visible and hidden elements	$ ("Div". Scrollleft (200)

Note:

The offset method is relative offset relative to the current window, while the position method is relative to the parent element.

-- Select from learning jquery from scratch