<!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. Qt_为什么学习Qt

    1)学习GUI编程,市场上任何一款产品几乎都带有图形界面,市场上很火的Androoid.IOS编程无非也是GUI app编程,GUI编程都是差不多的,学习Qt后再学习ANdroid IOS ,那都是S ...

  2. Vue之组件的使用

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

  3. github 新建一个仓库后

    每次都记不住命令,记一下,防止找不到 echo "# learn18" >> README.md git init git add README.md git comm ...

  4. mysql alter修改数据库表结构用法

    1.alter操作表字段 (1)增加字段 alter table 表名 add 字段名 字段类型: alter table student add name varchar(10): (2)修改字段 ...

  5. gcc编译详解

    GCC(GNU Compiler Collection,GNU编译器套件),是由 GNU 开发的编程语言编译器.它是以GPL许可证所发行的自由软件,也是 GNU计划的关键部分.GCC原本作为GNU操作 ...

  6. matlab自定义函数的五种表示（前2种重点）

    1.命令文件/函数文件+函数文件:多个M文件 2.函数文件+子函数:一个M文件 3. inline:无需M文件 4.符号表达式+subs方式:无需M文件 5.字符串+subs方式:无需M文件 第一种: ...

  7. UART中RTS、CTS

    RTS (Require ToSend,发送请求)为输出信号,用于指示本设备准备好可接收数据,低电平有效,低电平说明本设备可以接收数据. CTS (Clear ToSend,发送允许)为输入信号,用于 ...

  8. 开发语言之---Python

    Python,如果你想进军AI,或是不想被自动化运维淘汰,Python是一门必须课. 在未来的大学课堂上,也许也会将Python加入必修中,就像Java一样. Python之“Hello World” ...

  9. Python面向对象之异常

    异常的概念 程序在运行时,如果python解释器遇见一个错误,就会停止程序的运行,并且提示一些错误信息,这就是异常: 程序遇见错误停止执行并且提示错误信息,这个动作我们称之为抛出(raise)异常: ...

  10. JavaScript中变量、作用域和内存问题（JavaScript高级程序设计第4章）

    一.变量 (1)ECMAScript变量肯能包含两种不同的数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段,引用类型值指那些可能由多个值构成的对象. (2)基本数据类型是按值访问,可 ...