Shulou(Shulou.com)05/31 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.