一个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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
javascript 定义新对象方法
Feb 20 Javascript
jQuery 技巧小结
Apr 02 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
返回上一个url并刷新界面的js代码
Sep 12 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 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用户指南-cookies部分
2006/10/09 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
Python Collatz序列实现过程解析
2019/10/12 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
历史专业大学生职业生涯规划书
2014/03/13 职场文书
企业精神口号
2014/06/11 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
年终工作总结范文
2019/06/20 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
Python matplotlib绘制雷达图
2022/04/13 Python
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android