How to change the height of div using jquery
This article mainly explains "how to use jquery to change the height of div". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use jquery to change the height of div".
Three methods: 1, with "$(" div "). Height (height value), set a new height value; 2, with" $("div"). Css ("height", "height value"), add a new height style; 3, with "$(" div "). Attr (" style "," height: value ").
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
There are several ways to change the height of an element in jquery:
Height ()
Css ()
Attr ()
1. Use height () to modify div height
The height () method sets the height of the matching element. Syntax:
$("div") .height (height value)
Example:
$(document) .ready (function () {$("# but1") .click (function () {$("div") .height ("30px");}) $("# but2") .click (function () {$("div") .height ("100px");}) Div {height: 60px; background-color: # FFC0CB;} A div element with a high 60px
Decrease div height and increase div height
2. Use css () to modify div height
Use css () to add a height style to the td element, syntax:
("div") .css ("height", "height value")
Example: modify based on the example of method 1
$(document) .ready (function () {$("button") .click (function () {$("div"). Css ("height", "40px");})
3. Use attr () to modify div height
Use attr () to control the value of the style attribute and add height styles to the td element. Syntax:
("div") .attr ("style", "height: height value")
Example: modify based on the example of method 1
$(document) .ready (function () {$("button") .click (function () {$("div"). Attr ("style", "height:100px")})
Thank you for your reading, the above is the content of "how to use jquery to change the height of div". After the study of this article, I believe you have a deeper understanding of how to use jquery to change the height of div, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
