一个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插件Style定制化方法的分析与比较
May 03 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
Ionic3实现图片瀑布流布局
Aug 09 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 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/10/30 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
Django 导出 Excel 代码的实例详解
2017/08/11 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
python系列 文件操作的代码
2019/10/06 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
Why do we need Unit test
2013/01/03 面试题
PyQt 如何创建自定义QWidget
2021/03/24 Python
法律专业个人实习自我鉴定
2013/09/23 职场文书
探矿工程师自荐信
2014/01/24 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书