一个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+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
JavaScript中的比较操作符&gt;、=、
Dec 31 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
Python的re模块正则表达式操作
2016/05/25 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
文秘人员工作职责
2014/01/31 职场文书
开学季活动策划方案
2014/02/28 职场文书
护士毕业实习感言
2014/03/05 职场文书
个人租房协议书
2014/04/09 职场文书
道德演讲稿
2014/05/21 职场文书
会计系毕业生求职信
2014/05/28 职场文书
班子四风对照检查材料
2014/08/21 职场文书
离婚协议书范文2014
2014/10/16 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书