一个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 相关文章推荐
jquery 弹出登录窗口实现代码
Dec 24 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
JS代码简洁方式之函数方法详解
Jul 28 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之第三天
2006/10/09 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
python3 拼接字符串的7种方法
2018/09/12 Python
python获取地震信息 微信实时推送
2019/06/18 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
产品生产计划书
2014/05/07 职场文书
计算机求职信
2014/07/02 职场文书
迎七一演讲稿
2014/09/12 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers