JS中级 - 03：文档宽高及窗口事件（选）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>窗口尺寸</title>
<style>
body{
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript">
window.onload =function(){
/**
*可视区的尺寸
*document.documentElement.clientWidth
*document.documentElement.clientHeight
*/
alert(document.documentElement.clientWidth+","+document.documentElement.clientHeight);
/**
* 滚动条滚动距离
* document.documentElement.scrollTop[srollLeft]
* document.body.scrollTop[srollLeft] //chrome浏览器只认识body
*/
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//alert(scrollTop);
/**
* 内容高度
* ScrollHeight:返回整个元素的高度（包括带滚动条的隐蔽的地方）
* oDiv.ScrollHeight(Width)
*/
//alert(div1.scrollHeight) //210
/**
* 文档高度
* offsetHeight
*/
//alert(document.documentElement.offsetHeight||document.body.offsetHeight); //2000
}
</script>
</head>
<body>
<div style="2000px">
<div id="div1" style="width:100px;height:100px;border:1px solid red;
padding:10px;margin:10px; ">
<div id="div2" style="width:100px;height:200px;background:blue"></div>
</div>
</div>
</body>
</html>
JS中级 - 03：文档宽高及窗口事件（选）的更多相关文章
- BOM，文档宽高及窗口事件小析
(一)BOM:Browser Object Model(浏览器对象模型)页面上所有的变量都是window的属性 一.方法:1. open(,)打开一个新窗口(页面)一参为页面地址url,二参为打开方式 ...
- JavaScript -获取屏窗与视窗、文档宽高
实例:1920*1080的电脑屏幕 1.获取窗口中的文档显示区域宽高 clientw = window.innerWidth; //1920(包含滚动条) clienth = window.inner ...
- js实现字体和容器宽高随窗口改变
用于字体大小和容器的宽高字体和宽高设为rem就可以了 var html = document.documentElement; function fonts(){ var hW = html.offs ...
- Sencha Cmd 6 和 Ext JS 6 指南文档（部分官方文档中文翻译）
近期组织了几个程序员网友,正在翻译一部分官方的Sencha Cmd 6 和 Ext JS 6 指南文档. 眼下还没翻译完,大家能够先看看 Sencha Cmd 6 和 Ext JS 6 指南文档 ( ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- js不需要知道图片宽高的懒加载方法（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）
js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- Ext JS 6学习文档-第8章-主题和响应式设计
Ext JS 6学习文档-第8章-主题和响应式设计 主题和响应式设计 本章重点在 ExtJS 应用的主题和响应式设计.主要有以下几点内容: SASS 介绍和入门 主题 响应式设计 SASS 介绍和入门 ...
- Ext JS 6学习文档-第7章-图表
Ext JS 6学习文档-第7章-图表 使用图表 本章中将探索在 ExtJS 中使用不同类型的图表并使用一个名为费用分析的示例项目结束本章所学.以下是将要所学的内容: 图表类型 条形图 和 柱形图 图 ...
随机推荐
- hdu5412——CRB and Queries
1.题目大意:区间第k大,单点修改 2.随便搞搞就好了= =,树套树或主席树,我写的很丑 #include <cstdio> #include <cstdlib> #inclu ...
- jdk 1.7 在ubuntu 环境配置
在/opt/里解压了jdk 1.7后 设置环境变量 chen@caicai ~ $ vim .profile export JAVA_HOME=/opt/jdk1..0_79 export JRE_H ...
- Raspberry Pi 配置笔记二
配置源 http://blog.chinaunix.net/uid-21658993-id-4702322.html deb http://ipv4.mirrors.ustc.edu.cn/raspb ...
- @PathVariable注解
spring mvc中的@PathVariable是用来获得请求url中的动态参数的,十分方便,复习下: . @Controller public class TestController { @Re ...
- PE556
考虑推广sum(i in Z){mu^2(i)}的做法. #include"roundCount.cpp" #include<cstdio> #include<v ...
- svn: E155004 'XX' is already locked
Error:svn: E155004: Run 'svn cleanup' to remove locks (type 'svn help cleanup' for details)svn: E155 ...
- EXTJS动态改变store的proxy的params
动态改变store的条件参数.var store = win.down('grid[name=sourceGrid]').getStore(); Ext.apply(store.proxy.extra ...
- PHP程序员如何突破成长瓶颈(php开发三到四年)
看了这篇博文,我正好处于这个阶段,也有心要突破自己,呵呵! 作为Web开发中应用最广泛的语言之一,PHP有着大量的粉丝,那么你是一名优秀的程序员吗?在进行自我修炼的同时,你是否想过面对各种各样的问题, ...
- mac os x安装php7.0和phalcon3.0
1,安装xampp(with php7.0) 下载地址: https://www.apachefriends.org/download.html 2,安装phalcon3.0 cd ~/git clo ...
- springMVC 访问404
问题:404 但是其他的controller可以访问!!!