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


Posted in Javascript onOctober 29, 2014
<!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 表单验证常见正则
Sep 28 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
vue文件运行的方法教学
Feb 12 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 #Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 #Javascript
js实现ArrayList功能附实例代码
Oct 29 #Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 #Javascript
js中的json对象详细介绍
Oct 29 #Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 #Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 #Javascript
You might like
PHP Filter过滤器全面解析
2016/08/09 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
js常用自定义公共函数汇总
2014/01/15 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
python之Character string(实例讲解)
2017/09/25 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
Python如何合并多个字典或映射
2020/07/24 Python
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
就业自荐书
2013/12/05 职场文书
消防安全汇报材料
2014/02/08 职场文书
责任书格式范文
2014/07/28 职场文书
办理收楼委托书范本
2014/10/09 职场文书
语文教师个人工作总结
2015/02/06 职场文书
财务统计员岗位职责
2015/04/14 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers