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 中使用不同类型的图表并使用一个名为费用分析的示例项目结束本章所学.以下是将要所学的内容: 图表类型 条形图 和 柱形图 图 ...
随机推荐
- Sqli-LABS通关笔录-17-审计SQL注入
这个关卡开始好像进入新的知识区了,前面几个是让我们加深对盲注的印象.接下来又是新知识了!皮卡丘,接招吧! 代码是从SQL-libs的第十七关卡扣的. 页面效果如下所示: PHP面完整CODE如下所示: ...
- intellij Idea快捷键
CTRL+ALT+O 优化导入的类和包 Alt + Center 导入类,实现接口 CTRL+N 查找类CTRL+SHIFT+N 查找文件CTRL+SHIFT+ALT+N 查找类中的方法或变 ...
- Java对象访问 类的静态变量
Java类的静态变量用对象和类名都能访问,一般用类名,但如果用对象来访问静态变量呢,有何种效果? 测试一下: package JavaTest; public class test{ public s ...
- redis配置文件redis.conf参数说明
redis配置文件redis.conf参数说明 (2013-01-09 21:20:40)转载▼ 标签: redis配置 redis.conf 配置说明 杂谈 分类: nosql # By defau ...
- 保存字符串到手机SDcard为txt文件
try { if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) { File sdCardDir ...
- jquery数组内多维对象
jquery数组内多维对象 var postData=[],obj,list; obj = !!obj ? obj : $('#dist_meici_checkinfo_form'); obj.fin ...
- PhpExcel笔记,phpExcel中文帮助手册
下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...
- C# 条件编译备忘
第一步:配置管理器中新建解决方案配置 第二步:定义条件编译符号: 第三步:在代码中使用自定义的条件编译 #if CustomDebug Console.WriteLine("dsads&qu ...
- Unity3d《Shader篇》地球旋转上空悬浮云层
记得把纹理设置成Repeat Shader "Custom/Earth" { Properties { _MainTex ("Base (RGB)", 2D) ...
- ios awakeFromNib 和 initWithCoder:
During the instantiation process, each object in the archive is unarchived and then initialized with ...