一个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写的日历(包括日历的样式及功能)
Apr 23 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
npm 语义版本控制详解
Sep 10 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
微信小程序实现签字功能
Dec 23 Javascript
vue键盘事件点击事件加native操作
Jul 27 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迭代器实现斐波纳契数列的函数
2013/11/12 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
Python列表(list)常用操作方法小结
2015/02/02 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
python:动态路由的Flask程序代码
2019/11/22 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
大三自我鉴定范文
2013/10/05 职场文书
公司培训心得体会
2014/01/03 职场文书
模范教师事迹材料
2014/02/10 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
党员倡议书
2015/01/19 职场文书
聘任证明怎么写
2015/03/02 职场文书
病危通知单
2015/04/17 职场文书
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技