一个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 18 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
Angular 路由route实例代码
Jul 12 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
js数组去重的方法总结
Jan 18 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
node.js如何根据URL返回指定的图片详解
Oct 21 Javascript
JavaScript实现无限轮播效果
Nov 19 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中调用JAVA
2006/10/09 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
深入理解JavaScript定时机制
2010/10/29 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python中调用其他程序的方式详解
2019/08/06 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
高中毕业自我鉴定
2013/12/19 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
高中军训感想300字
2014/03/04 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
药剂专业求职信
2014/06/20 职场文书
档案工作汇报材料
2014/08/21 职场文书
后勤工作个人总结
2015/02/28 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
Java spring定时任务详解
2021/10/05 Java/Android
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS