Javascript如何设置元素的高度

什么是元素的高度？

在Web设计中，每个HTML元素都有其自身的大小和形状。其中一个最重要的尺寸参数就是元素的“高度”。这通常指该元素从顶部到底部所占据空间的垂直距离。

Javascript如何获取或设置一个DOM节点（即HTML标签）的高度？

Javascript提供了一种方便和灵活地操作DOM节点属性和样式表属性值以及事件处理器等功能，也包括对于HTML标签上各种属性、方法和事件进行操作。以下将介绍几种获取或设置一个DOM节点（即HTML标记）高度信息的方法：

1.使用原生JS获取并修改CSS样式

可以使用Javascript来访问某个特定标记内联或者外部定义好了CSS规则，并针对相关规则进行修改。

例如：

// 获取id为myDiv 的div 标签

var myDiv = document.getElementById('myDiv');

// 设置div 高度为200px

myDiv.style.height = '200px';

2.通过jQuery库实现快速操作

jQuery 是 Javascript 库之一，它简化了 DOM 操作、AJAX 和其他诸多任务。下面我们看一下 jQuery 如何改变 HTML 元素 CSS 属性：

var myDiv = $('#myDiv');

// 设置div 高度为200px

myDiv.css('height', '200px');

3.使用offsetHeight属性获取高度信息

可以使用 offsetHeight 属性来获取元素的实际高度（包括边框和内边距）。

例如：

// 获取id为myDiv 的div 标签高度信息

var myDiv = document.getElementById('myDiv');

alert(myDiv.offsetHeight); // 输出该标记实际高度值，单位像素

Javascript如何设置一个DOM节点的最小或最大高度？

1. 通过CSS样式表规则设置

在CSS中定义min-height 和 max-height 来限制标记的尺寸。我们只需要通过Javascript更改相应的类名即可。

HTML代码：

CSS代码：

.box {

min-height: 100px; /* 最小高度 */

max-height: 300px; /* 最大高度 */

}

Javascript:

// 获取id为 box 的 div 元素，并添加新class样式名称style2

document.getElementById("box").className += " style2";

2. 使用JS直接修改元素属性

我们也可以使用 Javascript 直接修改元素的 style 属性，设置其最小和最大高度。

// 设置div 最小高度为100px, 最大高度为300px

myDiv.style.minHeight= '100px';

myDiv.style.maxHeight= '300px';