JavaScript网页定位详解

 本篇文章主要是对JavaScript网页定位进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助

网页可见区域宽:document.body.clientWidth 
网页可见区域高:document.body.clientHeight 
网页可见区域宽:document.body.offsetWidth (包括边线的宽) 
网页可见区域高:document.body.offsetHeight (包括边线的宽) 
网页正文全文宽:document.body.scrollWidth 
网页正文全文高:document.body.scrollHeight 
网页被卷去的高:document.body.scrollTop 
网页被卷去的左:document.body.scrollLeft 
网页正文部分上:window.screenTop 
网页正文部分左:window.screenLeft 
屏幕分辨率的高:window.screen.height 
屏幕分辨率的宽:window.screen.width 
屏幕可用工作区高度:window.screen.availHeight 
屏幕可用工作区宽度:window.screen.availWidth
 
 
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
scrollWidth:获取对象的滚动宽度 
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
event.clientX 相对文档的水平座标 
event.clientY 相对文档的垂直座标 
event.offsetX 相对容器的水平坐标 
event.offsetY 相对容器的垂直坐标 
document.documentElement.scrollTop 垂直方向滚动的值 
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
 
IE,FireFox 差异如下:
 
IE6.0、FF1.06+:
 
clientWidth = width + padding
 
clientHeight = height + padding
 
offsetWidth = width + padding + border
 
offsetHeight = height + padding + border
 
IE5.0/5.5: 
clientWidth = width - border
 
clientHeight = height - border
 
offsetWidth = width
 
offsetHeight = height
 
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
 
=====================================================
 
昨天给项目中的一些页面更换了版式,更换完毕后发现一些js不好使了。通过document.documentElement.clientWidth这样的语句获得的页面宽度为0 。经过一番google,才知道是新页面上缺少了对W3C标准的引用,导致document.documentElement.clientWidth失效:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
如果在页面中添加这行标记的话
 
在IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
 
在FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
 
在Opera中: 
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
而如果没有定义W3C的标准,则
 
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
 
FireFox为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
 
Opera为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
 
 

时间: 2024-11-15 20:02:44

JavaScript网页定位详解的相关文章

JavaScript网页定位详解_javascript技巧

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

JavaScript操作Cookie详解

 这篇文章主要介绍了JavaScript操作Cookie详解,本文讲解了什么是Cookie.Cookie基础知识.Cookie常见问题.cookie 有两种清除方式.Cookie基础用法.Cookie高级用法等内容,需要的朋友可以参考下     什么是 Cookie "cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值." - w3school cooki

JavaScript严格模式详解_javascript技巧

如我们所知,JavaScript 是一门灵活的语言.其灵活性同样也带来了很多坑,当然也有一些是 设计缺陷 .比如 一个变量没有声明就赋值,默认是全局变量,如 (function () { a = 3; })(); console.log(window.a); // 输出3 对象有多个重名属性,最后赋值的那个属性会覆盖前面的值.如 var obj = { c: 3, c: 4 } // obj 为 {c:4} 还有什么 == , typeof 之类的坑,数不胜数.毕竟 JavaScript 之父设

JavaScript运算符实例详解

核心提示:JavaScript运算符实例详解 根据处理对象的数目: 单元运算符; 二元运算符; 三元运算符. 根据功能: 赋值运算符; = += -= *= /= %=(取余) 算术运算符; + - * / %(取余) ++(递增) --(递减) - 例1: 例2: <Script> var x = y = 3;  with (document) {      write("x = 3, y = 3 <br>");      write("若x = y

Javascript字符串常用方法详解_javascript技巧

字符串 字符串就是一个或多个排列在一起的字符,放在单引号或双引号之中. 'abc' "abc" length属性 js里的字符串类似于数组,都是一个一个字符拼凑在一起组成的,因此可以用length属性取得字符串的长度 var str = "hello" str.length; // 5 字符串常用的一些方法 1. charAt() str.charAt(n) => 返回字符串的第 n 个字符,如果不在 0~str.length-1之间,则返回一个空字符串. v

JavaScript作用域示例详解_javascript技巧

作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域示例详解的介绍,希望能帮助大家更好的学习JavaScript. 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 一.JavaScript中无块级作用域 在Java或C#中存在块级作用域

Javascript复制实例详解_javascript技巧

在做项目时有一个需求,是需要复制内容到剪切板,因为有众多浏览器,所以要兼容性很重要. 1.最简单的copy,只能在IE下使用 使用clipboardData方法 <script type="text/javascript"> function copy(){ window.clipboardData.setData("text",document.getElementById("name").value); alert("T

网页菜单详解

 首先看这下面的例子(鼠标移上去): Link 1 Link 2 Link 3 Link N 菜单实例 类似这样的仿Windows下拉菜单,在网上是比较常见的,最初出现在微软网站上,之后被大量效仿. 事实上制作这样一个模拟菜单也并不是一件很困难的事,比如上面的例子代码如下: ------------------------------------------- <!-- 样式部分 --> <style type=text/css> td,div { font: normal 12p

JSP+Servlet+JavaBean实现登录网页实例详解_JSP编程

本文实例讲述了JSP+Servlet+JavaBean实现登录网页的方法.分享给大家供大家参考.具体如下: 这里涉及到四个文件: 1. 登录页面:login.html 2. 登录成功欢迎页面:login_success.jsp 3. 登录失败页面:login_failure.jsp 4. Servlet处理文件:LoginServlet.java 其实还涉及到一个文件:web.xml,这个后面再说: 下面分别介绍这几个文件: 1. 登录页面:login.html <!-- 该Login页面是一个