一个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关于select的相关操作说明
Jan 13 Javascript
jQuery bind事件使用详解
May 05 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
javascript的函数作用域
Nov 12 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 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知道与问问的采集插件代码
2010/10/12 PHP
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
node.js中watch机制详解
2014/11/17 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
vue中的scope使用详解
2017/10/29 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
python笔记(2)
2012/10/24 Python
python学习手册中的python多态示例代码
2014/01/21 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
python中partial()基础用法说明
2018/12/30 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
python SVD压缩图像的实现代码
2019/11/05 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
在python3中实现更新界面
2020/02/21 Python
python中如何打包用户自定义模块
2020/09/23 Python
Numpy数组的广播机制的实现
2020/11/03 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
学习十八大的心得体会
2014/09/12 职场文书
科学育儿宣传标语
2014/10/08 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
MySQL大小写敏感的注意事项
2021/05/24 MySQL