How to change the position of div with jquery

In jquery, you can use the css() method with the margin attribute to change the position of the div. The css() method is used to set or return one or more style attributes of the selected element. The margin attribute is used to set the element. Margin, the syntax is "div object.css(margin: changed position value;)".

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

How jquery changes the position of div

In jquery, the position style of div is mainly set through the css() method to modify the position of div

Create a new html file, Named test.html, it is used to explain jQuery dynamically modifying the DIV position. Create a module using div tags for dynamically changing its position using the jquery method below. Set the class attribute of div to mydiv, which is mainly used to obtain the div object through this class below.

In order to show obvious effects, use css to set the height and width of the div to 150px, and the border to a 1px solid gray border. Create a button using the button tag, bind the onclick event to the button button, and execute the edit() function when the button is clicked.

In the js tag, create the edit() function. Within the function, obtain the div object through the class name, and use the css() method to set the left margin-left and the top margin-top to modify the div. s position.

Open the test.html file in the browser and click the button to see the effect.

Summary:

1. Create a test.html file.

2. In the file, use the div tag to create a module, and use the button tag to create a button to trigger the execution of the js function.

3. Create a function in the js tag. Within the function, obtain the div object and use the css() method to set the left margin-left and top margin-top to modify the position of the div.

Notes

The css() method supports the setting of all css styles. Multiple styles are separated by commas.

Recommended related video tutorials: jQuery video tutorial

The above is the detailed content of How to change the position of div with jquery. For more information, please follow other related articles on the PHP Chinese website!