Using jquery to manipulate attributes and styles of elements

This article learns how to use jquery to get and manipulate the attributes and CSS styles of elements.

Element properties and Dom properties

For a LABEL element such as the following:

</img>

We often refer to Id,src,alt,class as attributes, or element attributes. However, when the browser parses a LABEL element, the element is parsed into a DOM object, and the element attributes are parsed as DOM attributes.

Element attributes and Dom properties are just different names when we parse them differently.

It is worth noting that:

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

For example, the Class property of IMG, which is class when represented as an element attribute, is a property named ClassName when represented as a DOM property

2. In JavaScript, we can get or set the DOM property directly

Manipulating element properties using jquery

In jquery, the attr function is provided to manipulate element properties, as follows:

	description	example
attr (name)	Get the property value of the first matching element.	$ ("input"). attr ("value")
attr (property)	set an object in the form of a "name/value" to the properties of all matching elements	$ (" Input "). attr ({value:" TXT ", title:" Text "});
attr (key,value)	set a property value for all matching elements	$ ("input "). attr (" value "," txt ");
attr (KEY,FN)		$ ("input "). attr (" title ", function () {return this.value});
removeattr (name)		$ ("input"). Removeattr ("value");

Attention:

1. If you want to set the class property of an object, you must use ClassName as the property name.

2. We can use removeattr to delete an element attribute, but its corresponding DOM attribute is not deleted, but only changed its value.

Based on several of the above functions, we can use this to get the value and innerHTML values of the DOM:

$ ("#txt1"). attr ("value") $ ("#txt1"). attr ("value", "1234"); $ ("#dv1"). attr ("InnerHTML", ' This is a div '); $ ("#dv1"). attr ("InnerHTML");

In fact, jquery provides an easier way to access value,innerhtml, with the following functions:

TD Width= "362" > Sets the HTML content of each matching element

	description	example
val ()	Get the value of the first matching element	$ ("#txt1"). Val ()
val (val)	set value value for matching element	$ ("#txt1"). Val ("Txt1")
html ()	Gets the HTML content of the first matching element	$ ("#dv1"). html ()
html (val)	$ ("#dv1"). HTML ("This is a div")
text ()	Get the contents of all matching text nodes and concatenate them	$ ("div"). Text ()
text (val)	place all matching elements in Val	$ ("div"). T Ext ("divs")

Using jquery to manipulate CSS

1. Modifying CSS Classes

Name of function	Description	Example
AddClass (classes)	Adds the specified class name for each matching element	$ ("input"). AddClass ("colorred borderblack");
Hasclass (Class)	Determines whether at least one of the matching element sets contains the specified CSS class, and returns True if there is one containing the specified CSS class	Alert ($ ("input"). Hasclass ("Borderblack"));
Removeclass ([classes])	Removes all or specified CSS classes from a matching element	$ ("input"). Removeclass ("colorred borderblack");
Toggleclass (classes)	Delete (add) The specified class if it exists (does not exist)	$ ("input"). Toggleclass ("colorred borderblack");
Toggleclass (Classes,switch)	When switch is true, add class, switch to False, delete class	$ ("input"). Toggleclass ("Colorred borderblack", true);

Attention:

1.addClass, Removeclass, Toggleclass can add multiple classes, separated by spaces between multiple classes

The parameters of the 2.removeClass method are optional, if there are parameters, the specified class is deleted, and if no arguments are removed, all classes of the matching element are deleted

3. When calling Toggleclass (Classes,switch), we can have more usage, such as:

Whenever the button is clicked three times, add the style var i = 0;$ ("#btn"). Click (function () {    $ ("input"). Toggleclass ("Colorred borderblack", True);});

2. Modifying CSS Styles

function name /td>	description	example
CSS (name)	access the style properties of the first matching element	$ ("input"). CSS ("color")
css (properties)	set a "name/value" pair to the style properties of all matching elements	$ (" input "). CSS ({border:" Solid 3px Silver ", Color:" Red "})
	If it is a number, it is automatically converted to the pixel value	$ ("input"). CSS (" Border-width "," 5 ");

Attention:

For code examples and results with style values as numbers:

Example	The generated source code
$ ("input"). CSS ("Border-width", "5");	<input style= "BORDER-RIGHT-WIDTH:5PX; border-top-width:5px; border-bottom-width:5px; border-left-width:5px " id=" Txt1 "/>

Attention:

For some commonly used properties, such as Width,height, using attr ("width") and css ("width") are not able to get their values properly, now let's introduce some common properties.

Get the Common Properties

1. wide and high correlation

Name of function	Description	Example
Width ()	Gets the width of the first matching element, which is the default px	$ ("#txt1"). Width ()
Width (val)	Sets the width value for the matched element, which is the default px	$ ("#txt1"). Width (200)
Height ()	Gets the height of the first matching element, the default is PX	$ ("#txt1"). Height ()
Height (val)	Sets the width value for the matched element, which is the default px	$ ("#txt1"). Height (20)
Innerwidth ()	Gets the inner area width of the first matched element (including padding, excluding border)	$ ("#txt1"). Innerwidth ()
Innerheight ()	Gets the inner area height of the first matching element (including padding, excluding border)	$ ("#txt1"). Innerheight ()
Outerwidth ([margin])	Gets the outer area width of the first matching element (including Padding,border) Margin is true to include margin, otherwise it does not include	$ ("#txt1"). Outerwidth ()
Outerheight ([margin])	Gets the height of the outer area of the first matching element (including Padding,border) Margin is true to include margin, otherwise it does not include	$ ("#txt1"). Outerheight (True)

Attention:

Returns the height, width of the number, without PX

It would be easier to understand a picture by referring to it.

2. Location-related

In scripts that design some pop-up objects, it is often necessary to dynamically get the popup coordinates and set the position of the elements. jquery provides us with location-related functions.

Name of function	Description	Example
Offset ()	Gets the relative offset of the matching element in the current window Valid only for visible elements	$ ("#btn"). Offset (). top$ ("#btn"). Offset (). Left
Position ()	Gets the offset of the matching element relative to the parent element Valid only for visible elements	$ ("#btn"). Position (). top$ ("#btn"). Position (). Left
ScrollTop ()	Gets the offset of the top of a matching element relative to the scrollbar Valid for both visible and hidden elements	$ ("div"). ScrollTop ()
ScrollTop (Val)	Set vertical scroll bar top offset to this value Valid for both visible and hidden elements	$ ("div"). ScrollTop (200)
ScrollLeft ()	Gets the offset of the match element relative to the left of the scrollbar Valid for both visible and hidden elements	$ ("div"). ScrollLeft ()
ScrollLeft (Val)	Set the offset to the left of the horizontal scroll bar Valid for both visible and hidden elements	$ ("div"). ScrollLeft (200)

Attention:

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

--Choose from the zero-based learning of jquery

Using jquery to manipulate attributes and styles of elements