Как динамически установить высоту и ширину элемента div с помощью jQuery?
Установите высоту элемента div с помощью jQuery
Высота содержимого div может динамически устанавливаться или изменяться с помощью методов height (), innerHeight () и outerHeight () в зависимости от требований пользователя. Если пользователь хочет изменить высоту содержимого div динамически, это включает изменение фактической высоты, фактической высоты с заполнением и фактической высоты с заполнением и границей, тогда пользователь может использовать любой из следующих методов, которые будут динамически устанавливать высоту содержимого элемента.
- Использование метода height ()
- Использование метода innerHeight ()
- Использование метода outerHeight ()
Пример 1. Высота содержимого div с использованием метода height () изменит высоту содержимого элемента, исключая отступы, границу и поля элемента.
HTML
<!DOCTYPE html> < html > < head > < title > How to dynamically set the height of a div element using jQuery? </ title > < script src = </ script > < style > #div1 { height: 50px; width: 300px; border: 2px solid black; } h1 { color: green; } .box{ background: green; border: 1px solid #ccc; color: white; } </ style > </ head > < body > < center > < h1 >GeeksforGeeks</ h1 > < h3 >Dynamically set the height of a div element using jQuery</ h3 > < div id = "div1" class = "box" > Dynamically set content height of a div on GeeksforGeek.< br > GeeksforGeeks is a computer science portal which helps students to learn various programming language and master data structures and algorithms. There are various courses available to learn new skills. </ div > < br > < form > < input type = "text" class = "geeks1" > < button type = "button" class = "geeks2" > Set Height </ button > </ form > < p id = "p1" ></ p > < p id = "p2" ></ p > </ center > < script > $(document).ready(function(){ $(".geeks2").click(function(){ var demo ="Previous-height: "+ $("#div1").height(); + "px"; $("#p1").text(demo); var newHeight = $(".geeks1").val(); $(".box").height(newHeight); demo = "New-height: "+ $("#div1").height(); + "px"; $("#p2").text(demo); }); }); </ script > </ body > </ html > |
Выход:
Пример 2: Высота содержимого div с использованием метода innerHeight () изменит высоту содержимого элемента, включая заполнение элемента.
HTML
<!DOCTYPE html> < html > < head > < title > How to dynamically set the height of a div element using jQuery? </ title > < script src = </ script > < style > #div1 { height: 50px; width: 300px; border: 2px solid black; padding : 10px; } h1 { color: green; } .box{ background: green; border: 1px solid #ccc; color: white; } </ style > </ head > < body > < center > < h1 >GeeksforGeeks</ h1 > < h3 >Dynamically set the height of a div element using jQuery</ h3 > < div id = "div1" class = "box" > Dynamically set content height of a div on GeeksforGeek.< br > GeeksforGeeks is a computer science portal which helps students to learn various programming language and master data structures and algorithms. There are various courses available to learn new skills. </ div > < br > < form > < input type = "text" class = "geeks1" > < button type = "button" class = "geeks2" > Set Height </ button > </ form > < p id = "p1" ></ p > < p id = "p2" ></ p > </ center > < script > $(document).ready(function(){ $(".geeks2").click(function(){ var demo ="Previous-height(+Padding) : " + $("#div1").innerHeight(); + "px"; $("#p1").text(demo); var newHeight = $(".geeks1").val(); $(".box").innerHeight(newHeight); demo = "New-height(+Padding) : "+ $("#div1").innerHeight(); + "px"; $("#p2").text(demo); }); }); </ script > </ body > </ html > |
Выход:
Пример 3: Высота содержимого div с использованием метода outerHeight () изменит высоту содержимого элемента, включая отступы и границу элемента.
HTML
<!DOCTYPE html> < html > < head > < title > How to dynamically set the height of a div element using jQuery? </ title > < script src = </ script > < style > #div1 { height: 50px; width: 300px; border: 2px solid black; padding : 10px; } h1 { color: green; } .box{ background: green; border: 1px solid #ccc; color: white; } </ style > </ head > < body > < center > < h1 >GeeksforGeeks</ h1 > < h3 >Dynamically set the height of a div element using jQuery</ h3 > < div id = "div1" class = "box" > Dynamically set content height of a div on GeeksforGeek.< br > GeeksforGeeks is a computer science portal which helps students to learn various programming language and master data structures and algorithms. There are various courses available to learn new skills. </ div > < br > < form > < input type = "text" class = "geeks1" > < button type = "button" class = "geeks2" > Set Height </ button > </ form > < p id = "p1" ></ p > < p id = "p2" ></ p > </ center > < script > $(document).ready(function(){ $(".geeks2").click(function(){ var demo ="Previous-height(border+Padding) : " + $("#div1").outerHeight(); + "px"; $("#p1").text(demo); var newHeight = $(".geeks1").val(); $(".box").outerHeight(newHeight); demo = "New-height(border+Padding) : " + $("#div1").outerHeight(); + "px"; $("#p2").text(demo); }); }); </ script > </ body > </ html > |
Выход:
Установите ширину элемента div с помощью jQuery
Ширина содержимого div может динамически устанавливаться или изменяться с помощью методов width (), innerWidth () и outerWidth () в зависимости от требований пользователя. Если пользователь хочет изменить ширину содержимого div динамически, это включает изменение фактической ширины, фактической ширины с заполнением и фактической ширины с заполнением и границей, тогда пользователь может использовать любой из следующих методов, которые будут динамически устанавливать ширину содержимого элемента.
- Использование метода width ()
- Использование метода innerWidth ()
- Использование метода outerWidth ()
Пример 1. Ширина содержимого div с использованием метода width () изменит ширину содержимого элемента, исключая отступ, границу и поле элемента.
HTML
<!DOCTYPE html> < html > < head > < title > How to dynamically set the width of a div element using jQuery? </ title > < script src = </ script > < style > #div1 { height: 100px; width: 200px; border: 2px solid black; padding : 10px; } h1 { color: green; } .box{ background: green; border: 1px solid #ccc; color: white; } </ style > </ head > < body > < center > < h1 >GeeksforGeeks</ h1 > < h3 >Dynamically set the width of a div element using jQuery</ h3 > < div id = "div1" class = "box" > Dynamically set content width of a div on GeeksforGeek.< br > GeeksforGeeks is a computer science portal which helps students to learn various programming language and master data structures and algorithms. There are various courses available to learn new skills. </ div > < br > < form > < input type = "text" class = "geeks1" > < button type = "button" class = "geeks2" > Set Width </ button > </ form > < p id = "p1" ></ p > < p id = "p2" ></ p > </ center > < script > $(document).ready(function(){ $(".geeks2").click(function(){ var demo ="Previous-width : "+ $("#div1").width(); + "px"; $("#p1").text(demo); var newWidth = $(".geeks1").val(); $(".box").width(newWidth); demo = "New-width : "+ $("#div1").width(); + "px"; $("#p2").text(demo); }); }); </ script > </ body > </ html > |
Выход:
Пример 2: Ширина содержимого div с использованием метода innerWidth () изменит ширину содержимого элемента, включая заполнение элемента.
HTML
<!DOCTYPE html> < html > < head > < title > How to dynamically set the width of a div element using jQuery? </ title > < script src = </ script > < style > #div1 { height: 100px; width: 200px; border: 2px solid black; padding : 10px; } h1 { color: green; } .box{ background: green; border: 1px solid #ccc; color: white; } </ style > </ head > < body > < center > < h1 >GeeksforGeeks</ h1 > < h3 >Dynamically set the width of a div element using jQuery</ h3 > < div id = "div1" class = "box" > Dynamically set content width of a div on GeeksforGeek.< br > GeeksforGeeks is a computer science portal which helps students to learn various РЕКОМЕНДУЕМЫЕ СТАТЬИ |