<!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实例-获取元素当前高度的更多相关文章

  1. 每天一个JavaScript实例-操作元素定位元素

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 每天一个JavaScript实例-推断图片是否载入完毕

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 每天一个JavaScript实例-动态省份选择城市

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 每天一个JavaScript实例-递归实现反转数组字符串

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 每天一个JavaScript实例-canvas绘图

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. python之道02

    猜数字,设定一个理想数字比如:66,让用户输入数字,如果比66大,则显示猜测的结果大了,然后继续让用户输入; 如果比66小,则显示猜测的结果小了,然后继续让用户输入;只有等于66,显示猜测结果正确,然 ...

  2. node的影响及前后端之争

    作者:知乎用户链接:https://www.zhihu.com/question/59578433/answer/326694511来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  3. devops issue

    1.Nginx(refercence:https://zhuanlan.zhihu.com/p/24382606) summary: DJANGO_PROJECT = /home/django/dja ...

  4. HTTP请求头的具体含意

    为你详细解读HTTP请求头的具体含意 | 浏览:5763 | 更新:2012-03-16 16:41 当我们打开一个网页时,浏览器要向网站服务器发送一个HTTP请求头,然后网站服务器根据HTTP请求头 ...

  5. Swift中的init方法

    摘要:Swift有着超级严格的初始化方法,不仅强化了designated初始化方法的地位,所有不加修饰的init方法都需要在方法中确保非Optional的实例变量被赋值初始化,而在子类中,也强制调用s ...

  6. 717. 1-bit and 2-bit Characters@python

    We have two special characters. The first character can be represented by one bit 0. The second char ...

  7. [LUOGU] P4290 [BZOJ] 1055 [HAOI2008]玩具取名

    题目描述 某人有一套玩具,并想法给玩具命名.首先他选择WING四个字母中的任意一个字母作为玩具的基本名字.然后他会根据自己的喜好,将名字中任意一个字母用"WING"中任意两个字母代 ...

  8. TP框架中同时使用“or”和“and”

    今天在tp中遇到一个问题,可能这并不算难的问题,但是我还是分享一下 以下是tp手册里面查询or的方式 $User = M("User"); // 实例化User对象 $where[ ...

  9. 关于U盘安装ubuntu-18.04安装时候出现的grub-efi-amd64-signed的问题。

    关于这个问题,首先我们要查看一下我们电脑的主板设置中U盘启动的类型是什么,是UEFI还是legacy? 对于如果是UEFI那么给ubuntu分区的时候不用设置/boot分区,设置efi系统分区:如果是 ...

  10. 【开发工具安装配置】MyEclipse,Tomcat,Mysql安装配置

    配置步骤 注:以下路径仅供参考! 一.MyEclipse10 1. 1 破解版破解说明: (1)下载安装好Myeclipse,先不要运行. (2)打开破解工具目录下的cracker.jar文件或run ...