chrome frame节点 取_Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理...

浏览器窗口可视区域大小

获得浏览器窗口的尺寸(浏览器的视口，不包括工具栏和滚动条)的方法:

一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight // - 浏览器窗口的内部高度

• window.innerWidth // - 浏览器窗口的内部宽度

二、对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight //表示HTML文档所在窗口的当前高度。

• document.documentElement.clientWidth //表示HTML文档所在窗口的当前宽度。

或者

Document对象的body属性对应HTML文档的

标签

• document.body.clientHeight

• document.body.clientWidth

在不同浏览器都实用的 JavaScript 方案：

var w= document.documentElement.clientWidth || document.body.clientWidth;

var h= document.documentElement.clientHeight || document.body.clientHeight;

网页尺寸scrollHeight

scrollHeight和scrollWidth，获取网页内容高度和宽度。

一、针对IE、Opera:

scrollHeight 是网页内容实际高度，可以小于 clientHeight。

二、针对NS、FF:

scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

三、浏览器兼容性

var w=document.documentElement.scrollWidth || document.body.scrollWidth;

var h=document.documentElement.scrollHeight || document.body.scrollHeight;

区分大小写scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

网页尺寸offsetHeight

offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

一、值

offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

var w= document.documentElement.offsetWidth || document.body.offsetWidth;

var h= document.documentElement.offsetHeight || document.body.offsetHeight;

网页卷去的距离与偏移量

我们先来看看下面的图：

scrollLeft: 设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。

scrollTop: 设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。

offsetLeft: 获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。

offsetTop: 获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

1. 区分大小写

2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

例：

function req(){

var div = document.getElementById("div1");

document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离

document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离

document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离

document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离

}

请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。

• 结果：
• offsetTop :
• offsetLeft :
• scrollTop :
• scrollLeft :

js获取浏览器窗口可视区域大小

获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: •  window.innerHeight - 浏 ...

JavaScript--DOM浏览器窗口可视区域大小

浏览器窗口可视区域大小 获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: •  window.inn ...

js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...

Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理

节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...

Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理

插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...

二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

javascript中求浏览器窗口可视区域兼容性写法

1.浏览器窗口可视区域大小 1.1 对于IE9+.Chrome.Firefox.Opera 以及 Safari:•  window.innerHeight - 浏览器窗口的内部高度•  window. ...

Android获取窗口可视区域大小: getWindowVisibleDisplayFrame()

getWindowVisibleDisplayFrame()方法 getWindowVisibleDisplayFrame()是View类下的一个方法,从方法的名字就可以看出,它是用来获取当前窗口可视 ...

Javascript进阶篇——(DOM—认识DOM、ByName、ByTagName)—笔记整理

认识DOM文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分解 ...

随机推荐

修复DapperExtension做Insert对象主键为Guid时不能赋值的问题

最新的dapperExtension有个bug,就是当做Insert操作的时候,实体的主键类型为GUID的时候,会自动生产一个新的GUID替换原来的GUID,使得使用者在Insert的时候不能在外部指 ...

Java中MyEclipse快捷键整理

************************************  MyEclipse 快捷键1(CTRL) ************************************ Ctrl ...

POI2012

现在才开始写 POI 是不是太弱了? -Rendezvous 怎么说呢,我发现我的代码好长啊-长啊-长啊-长长长长长长长长长长长长长长长长长长长长长长啊- 大概就是在一个内向树上搞一个类似 lca 的 ...

fio

h3.western { font-family: "Liberation Sans", sans-serif; font-size: 14pt } h3.cjk { font-f ...

【4_237】Delete Node in a Linked List

Delete Node in a Linked List Total Accepted: 48121 Total Submissions: 109297 Difficulty: Easy Write ...

在 C++Builder 工程里使用 Visual C++ DLL(3个工具) good

译者序: 第一次读这篇文章是在 2001 年 10 月,帮我解决了一点小问题.本来不好意思翻译,因为英语水平实在太差.最近发现不少网友在问在 C++Builder 的工程里调用 Visual C++  ...

Python文件之----CSV

# -*- coding:utf-8 -*- ''' Created on 2015年4月20日 @author: liuxue ''' import csv import sys reload(sy ...

Hibernate入门(五)

一 Hibernate继承映射 我们可以将继承层次结构类与数据库的表映射. 1. 每个层次类一张表 这个层次结构有三个类,Employee是Regular_Employee和Contract_Empl ...

Java学习5——标识符和关键字

标识符: 1.Java对各种变量.方法和类等要素命名时使用的字符串序列称为标识符.凡是自己可以起名字的地方都叫标识符,都要遵守标识符的规则. 2.Java标识符命名规则: 标识符由字母.下划线&quo ...

20175223 姚明宇 MyCP

目录 MyCP 要求 代码运行编译及文本输出输入结果 目录树 代码运行编译: 文本输出输入结果: 源代码 码云链接 目录 MyCP 要求 编写MyCP.java 实现类似Linux下cp XXX1 X ...