一个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获取网页中的js、css、Flash等文件
Dec 20 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
react使用CSS实现react动画功能示例
May 18 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
js实现StringBuffer的简单实例
2016/09/02 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
详解angular element()方法使用
2017/04/08 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
python机器人行走步数问题的解决
2018/01/29 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
Overload和Override的区别
2012/09/02 面试题
大学生水果店创业计划书
2014/01/28 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
借款协议书范本
2014/04/22 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
Python字符串常规操作小结
2022/04/03 Python
浅谈Redis缓冲区机制
2022/06/05 Redis