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 中使用不同类型的图表并使用一个名为费用分析的示例项目结束本章所学.以下是将要所学的内容: 图表类型 条形图 和 柱形图 图 ...
随机推荐
- 霸气！Nginx 中缓存静态文件秘籍
导读 这篇教程说明你应该怎样配置 nginx.设置 HTTP 头部过期时间,用 Cache-Control 中的 max-age 标记为静态文件(比如图片. CSS 和 Javascript 文件)设 ...
- VirtualBox CentOS安装增强功能与设置共享文件夹
如果安装的是CentOS minimal版无网络的可以看这篇文章. 一.安装依赖环境 依次执行如下命令 yum install update yum install kernel-headers yu ...
- velocity使用知识总结
1.后台传递List<bean> ,前台循环获取 List<Lead> leads = leadService.getAllLeadLists(); mv.addObject( ...
- Java读取mat文件
概述 使用ujmp中的jmatio模块读取.mat文件到java程序中. 其实,ujmp主要是在模块core中实现了矩阵运算,其余模块都是复用了已有的开源库.模块jmatio是复用了已有的JMatIo ...
- 字符串、字符、字节以及bit位小结与疑问
字符串是由一个个字符组成的,每个字符又有一个或多个字节来表示,每个字节又由8个bit位来表示 在C#里 字符串通常由string来声明,字符由char来声明,字节由byte来表示,位由bit来表示,具 ...
- [转]IntelliJ Idea 常用快捷键 列表(实战终极总结！！！！)
IntelliJ Idea 常用快捷键 列表(实战终极总结!!!!) ntelliJ Idea 常用快捷键 列表(实战终极总结!!!!) 1. -----------自动代码-------- 常用的有 ...
- pycharm 中 pep8 检查开启.
pycharm pep8检查的开启,默认是暗黄色,我这里为了醒目给改成了黄色.
- How to take partial screenshot with Selenium WebDriver in python
from selenium import webdriver from PIL import Image fox = webdriver.Firefox() fox.get('http://stack ...
- [转] This Android SDK requires Android Developer Toolkit version 23.0.0 or above
问题描述: This Android SDK requires Android Developer Toolkit version 23.0.0 or above. Current version ...
- “假学习“&”真学习“？(摘)
什么叫做“假学习”? 一.看书 买一堆书,有空看看.看书,这是典型的假学习.看书看不懂还在看,就是假学习,欺骗自己,安慰自己正在学习而已.专业书都写得很好,但大都是写给已经懂的人看的.看书的最大作用就 ...