一个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 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
JS重载实现方法分析
Dec 16 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
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提取中文首字母
2008/04/09 PHP
php include和require的区别深入解析
2013/06/17 PHP
php旋转图片90度的方法
2013/11/07 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
js表达式与运算符简单操作示例
2020/02/15 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
python 项目目录结构设置
2020/02/14 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
学生会竞聘书范文
2014/03/31 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
Python中re模块的元字符使用小结
2022/04/07 Python
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers