一个JavaScript获取元素当前高度的实例

2021-04-08 16:33JavaScript教程网 JavaScript

这篇文章主要为大家介绍了一个JavaScript获取元素当前高度的实例，比较实用，建议新手朋友们可以看看

				?

									<!DOCTYPE html> 

									<html> 

									<head> 

									<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

									<title>每天一个JavaScript实例-获取元素当前高度</title> 

									<style>

									#date{width:90%;height:25%;padding:10px;background: red;} 

									</style> 

									<script> 

									window.onload = function(){ 

									var height = getHeight(); 

									console.log(height); 

									} 

									function getHeight(){ 

									var height = 0; 

									var div = document.getElementById("date").getBoundingClientRect(); 

									if(div.height){ 

									height = div.height; 

									}else{ 

									height = div.bottom - div.top; 

									} 

									return height; 

									} 

									</script> 

									</head> 

									<body> 

									<div style="width:1000px;height:800px;"> 

									<div id = "date"> 

									</div> 

									</div> 

									</body> 

									</html>

JavaScript

元素

高度

延伸 · 阅读

精彩推荐

JavaScript

javascript 弹出窗口中是否显示地址栏的实现代码

程序中通过点击一个“发货提醒”链接弹出另一个窗口，使用的方法是用javascript 的openUrl()方法。...

JavaScript教程网10052021-01-28
js教程

微信小程序实现导航功能的操作步骤

这篇文章主要给大家介绍了关于微信小程序实现导航功能的操作步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值...

远航_20012022-02-15
JavaScript

JavaScript中的ubound函数使用实例

这篇文章主要介绍了JavaScript中的ubound函数使用实例,本文先是讲解了ubound函数的语法,然后给出了用法代码实例,需要的朋友可以参考下...

JavaScript教程网7552021-04-13
node.js

一文秒懂nodejs中的异步编程

这篇文章主要介绍了深入理解nodejs中的异步编程,本文给大家介绍的非常想详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...

flydean程序那些事8142022-01-10
JavaScript

基于jQuery的JavaScript模版引擎JsRender使用指南

这篇文章主要介绍了基于jQuery的JavaScript模版引擎JsRender使用指南,需要的朋友可以参考下...

jQuery教程网7202021-06-09
JavaScript

js获取会话框prompt的返回值的方法

这篇文章主要介绍了js获取会话框prompt的返回值的方法,通过一个简单的密码判断实例分析了js获取会话框prompt返回值的使用技巧,非常具有实用价值,需要的朋...

JS教程网12132021-06-28
JavaScript

vue Cli 环境删除与重装教程 - 版本文档

这篇文章主要介绍了vue Cli 环境删除与重装教程 - 版本文档，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...

草巾冒小子12742021-09-27
JavaScript

jQuery中before()方法用法实例

这篇文章主要介绍了jQuery中before()方法用法,以实例形式分析了before()方法的功能、定义与具体使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...

jQuery教程网10202021-06-02