一个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 相关文章推荐
(仅IE下有效)关于checkbox 三态
May 12 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
微信小程序返回多级页面的实现方法
Oct 27 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
PHP 5.3.0 安装分析心得
2009/08/07 PHP
数据库查询记录php 多行多列显示
2009/08/15 PHP
phpStorm2020 注册码
2020/09/17 PHP
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
python利用正则表达式搜索单词示例代码
2017/09/24 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
Python执行时间的几种计算方法
2020/07/31 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
军训的自我鉴定
2013/12/10 职场文书
简历上的自我评价
2014/02/03 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
信仰心得体会
2014/09/05 职场文书
网站出售协议书范文
2014/10/10 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS