一个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简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
小程序实现列表删除功能
Oct 30 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
vue离开当前页面触发的函数代码
Sep 01 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图片加中文水印实现代码分享
2012/10/31 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
php加密解密字符串示例
2016/10/13 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
Python遍历pandas数据方法总结
2018/02/09 Python
Python3爬虫全国地址信息
2019/01/05 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
小学生作文评语大全
2014/04/21 职场文书
超市商业计划书
2014/05/04 职场文书
自主招生专家推荐信
2015/03/26 职场文书
爱心捐书倡议书
2015/04/27 职场文书
2015年度企业工作总结
2015/05/21 职场文书
食堂管理制度范本
2015/08/04 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
Apache自带的ab压力测试工具的实现
2022/07/23 Servers