css获取高度（css3获取屏幕高度）

简介:

在网页开发中，经常需要获取元素的高度来进行布局或动态调整。CSS可以通过不同的方式来获取元素的高度，本文将详细介绍几种常用的方法。

一、使用height属性获取高度

height属性可以获取元素的高度，但是只适用于已经定义了具体高度的元素。例如：

```css

#element {

height: 100px;

```

通过获取元素的height属性，可以直接获得元素的高度值。

二、使用clientHeight属性获取高度

clientHeight属性获取元素的内部高度，包括内边距但不包括边框和外边距。示例如下：

```javascript

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

var height = element.clientHeight;

```

通过clientHeight属性可以获取元素的实际显示高度。

三、使用offsetHeight属性获取高度

offsetHeight属性获取元素的高度，包括内边距、边框和滚动条但不包括外边距。示例如下：

```javascript

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

var height = element.offsetHeight;

```

offsetHeight属性获取的是元素的整体高度，包括内部和外部的高度。

四、使用scrollHeight属性获取高度

scrollHeight属性获取元素的内容高度，不包括任何滚动条。当元素内容超出其高度时，scrollHeight会比实际高度大。示例如下：

```javascript

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

var height = element.scrollHeight;

```

通过scrollHeight属性可以获取元素内容的实际高度。

五、总结

通过以上几种方式，可以灵活获取元素的高度信息，根据具体需求选择合适的方法来获取元素的高度。在实际开发中，可以根据不同情况选择最合适的方式，来获取元素的高度信息。