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 中使用不同类型的图表并使用一个名为费用分析的示例项目结束本章所学.以下是将要所学的内容: 图表类型 条形图 和 柱形图 图 ...
随机推荐
- I/O复用机制概述
导读 /O多路复用技术通过把多个I/O的阻塞复用到同一个select的阻塞上,从而使得系统在单线程的情况下可以同时处理多个客户端请求.与传统的多线程/多进程模型比,I/O多路复用的最大优势是系统开销小 ...
- 5分钟教你Windows 10中将“运行”固定到开始菜单
导读 “运行”功能深受很多资深IT之家用户喜爱,因为它简约.方便.实用.在Win7等旧版系统中,用户可以让该功能直接在开始菜单显示,方便操作.但在Win10中,由于开始菜单已经重新编写,原有的设定已经 ...
- iOS中多线程原理与runloop介绍
一.线程概述 有些程序是一条直线,起点到终点:有些程序是一个圆,不断循环,直到将它切断.直线的如简单的Hello World,运行打印完,它的生命周期便结束了,像昙花一现那样:圆如操作系统,一直运行直 ...
- Citrix运行检测出错
Citrix运行检测出错: 出现意外错误.请确认服务器名称正确.服务器已打开.Citrix XenApp 已安装在服务器上并且 Citrix MFCOM 服务正在运行. 看Windows日志出现如下错 ...
- sublime-text3配置编译php
在sublime-text中配置php的编译环境非常简单,只需要新建一个build system就可以了 步骤: 1. 工具->编译系统->新编译系统,将默认的内容替换为如下代码:蓝字部分 ...
- mysql 日志文件mysql-bin文件清除方法，和mysql-bin相关文件的配置
默认情况下mysql会一直保留mysql-bin文件,这样到一定时候,磁盘可能会被撑满,这时候是否可以删除这些文件呢,是否可以安全删除,是个问题. 首先要说明一下,这些文件都是mysql的日志文件,如 ...
- C# 数组、多维数组（矩形数组）、锯齿数组（交叉数组）
数组是变量的索引列表,可以在方括号中指定索引来访问数组中的各个成员,其中索引是一个整数,从0开始. 一维数组 多维数组(矩形数组) 数组的数组(锯齿数组) 数组必须在访问之前初始化,数组的初始化有两种 ...
- javascript特殊运算符
in运算符 in运算符要求其左边的运算数是一个字符串,或可以被转换为字符串,右边的运算数十一个对象或数组.如果该 运算符左边的值是右边对象的一个属性名,则返回true, ...
- C#对图片文件的压缩、裁剪操作
在做项目时,对图片的处理,以前都采用在上传时,限制其大小的方式,这样带来诸多不便.毕竟网站运维人员不一定会对图片做处理,经常超出大小限制,即使会使用图片处理软件的,也由于个人水平方面原因,处理效果差强 ...
- 在eclipse上开发hadoop2.5.2程序的快捷方法
本文仍然使用MapReduce的经典例子 WordCount来测试eclipse的开发环境. 与大部分教程不同的是,本文使用的hadoop是2.5.2的版本,相较于之前的0.X版本,hadoop 2. ...