Самый простой способ изменить размер элемента - это изменить его свойство height с помощью скрипта.
element.height = pixels;
Вы находите элемент через объектную модель документа (DOM), которая является просто абстракцией разметки документа в объекты для чего-то вроде jscript, иногда называемого javascript. Пример того, как это сделать, приведен в руководстве w3schools jscript :
<html>
<head>
<script type="text/javascript">
function changeSize() {
document.getElementById("compman").height="250"
document.getElementById("compman").width="300"
}
</script>
</head>
<body>
<img id="compman" src="compman.gif" width="107" height="98" />
<br /><br />
<input type="button" onclick="changeSize()" value="Change size of image">
</body>
</html>
Если вы хотите сделать причудливые переходы и анимацию, тогда все, что вам нужно, это немного знаний о DOM и jscript, и вы можете написать свой собственный. Однако, чтобы такие фантазии работали в разных браузерах, сначала нужно провести шесть месяцев в небольшом погребе и текстовом редакторе без солнечного света, еды, воды и мыла.
Большинство людей предпочитают использовать чужой пот и использовать вместо этого такую библиотеку, как jQuery. Как только вы поймете, как изменить высоту чего-либо в простом jscript, документация по jQuery станет для вас гораздо более понятной. JQuery не единственный вариант. Есть множество многофункциональных библиотек. Если это просто фантазия, которую вы ищете, сценарий может занять ваше воображение.
Вот функция, которую я когда-то использовал для изменения размера (или Morph в языке, на котором говорят на скрипте) элемента с атрибутом id, установленным в 'page-header':
//used to control position/animation of the page header
var POS_UP = 1;
var POS_DOWN = 2;
var POS_DURATION = 1.0;
var POS_HEIGHT = {POS_UP:"180px;", POS_DOWN:"400px;"};
//the header effect can be referred to;
header_effect = null;
//header position is used as an index for POS_HEIGHT
var header_position = POS_UP;
/**************************************
* headerScroll() *
* Morphs the header's size *
**************************************/
function headerScroll() {
header_position = (POS_UP+POS_DOWN) - header_position;
header_effect = new Effect.Morph('page-header', {style: 'height:'+POS_HEIGHT[header_position], duration: POS_DURATION });
}
Это изменяет размер элемента в очень плавном переходе, позволяя моему <div id="page-header"> расширяться и раскрывать скрытое содержимое. Все, что вам нужно для переключения вверх / вниз, это <a onclick="headerScroll();">Toggle Up/Down</a>, и мы в отъезде.
Столько всего вы можете сделать очень легко, как только начнете. В любом случае, лучше всего потратить некоторое время на изучение jscript и основ HTML DOM, прежде чем погрузиться.