一个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.AsyncBox 弹出对话框插件
Aug 29 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 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 cli 方式 在crotab中运行解决
2010/02/08 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
PHP中常用的转义函数
2014/02/28 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
javascript实现模拟时钟的方法
2015/05/13 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Python如何根据时间序列数据作图
2020/05/12 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
体育教师工作总结的自我评价
2013/10/10 职场文书
住宅质量保证书
2014/04/29 职场文书
努力学习演讲稿
2014/05/10 职场文书
北京奥运会主题口号
2014/06/13 职场文书
职代会闭幕词
2015/01/28 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
心得体会格式及范文
2016/01/25 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP