JavaScript—— scroolleft----offsetleft 系列的含义以及浏览器兼容问题

clientWidth:获取对象的内容可视区域的宽度,即clientWidth=width+padding,不包括滚动条。

clientHeight:获取对象的内容可视区域的高度,即clientHeight=height+padding,不包括滚动条。

scrollWidth:获取对象内容的实际宽度,即对象的滚动宽度。

scrollHeight:获取对象内容的实际高度,即对象的滚动高度。

offsetWidth:获取对象的宽度,即offsetWidth=width+padding+scrollbar(滚动条)+border。也可以写成offsetWidth=clientWidth+scrollbar(滚动条)+border。

offsetHeight:获取对象的宽度,即offsetHeight=height+padding+scrollbar(滚动条)+border。也可以写成offsetHeight=clientHeight+scrollbar(滚动条)+border。

clientTop:获取对象的上边框的宽度。

clientLeft:获取对象的左边框的宽度。

scrollTop:设置或获取对象最顶端和对象内容的最顶端之间的距离。

scrollLeft:设置或获取对象最左端和对象内容的最左端之间的距离。

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

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

offsetParent:指的是最近的定位祖先元素。如果没有祖先元素是定位的话,会指向body元素。

td的offsetParent是TABLE,不管table是否有定位属性。td里面的元素的offsetParent为第一个定位的parents元素,如果没有定位元素呢,分为三种:

  1. 如果该元素没有定位时:TD
  2. 如果该元素有定位,table都没有定位的话,IE6中=HTML,FF,IE8=BODY
  3. 如果该元素和table都定位的话:TABLE

在IE6和IE7中对offsetParent解释有个小bug,当祖先元素都不是定位元素且本身是定位元素的时候返回document.documentElement,其他情况返回document.body!!

offsetTop、offsetLeft

(1)当对象的offsetParent属性指向的是body时,offsetLeft和offsetTop指的是对象的边框(不包括边框)到页面边缘的距离。在FireFox中,会减去body的边框的宽度。

(2)当对象的offsetParent属性指向的是最近的定位祖先元素时,offsetLeft和offsetTop指的是对象的边框(不包括边框)到最近的定位祖先元素的边框(不包括边框)的距离。在IE中,会将最近的定位祖先元素的边框宽度算在内。

示例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>鬼眼邪神的博客</title>
        <meta name="author" content="鬼眼邪神"/>
        <meta name="description" content="鬼眼邪神的博客,http://cyg7561.blog.163.com/"/>
        <style>
            * {
                margin:0;
                padding:0;
            }
            body {
                margin-left:30px;
                border:5px solid #000;
                background:yellow;
                height:350px;
            }
            .d {
                float:left;
                position:relative;
                margin:20px;
                padding:20px;
                width:200px;
                height:200px;
                border:20px solid #000;
                background:red;
                overflow:auto;
            }
            .con {
                float:left;
                width:400px;
                height:80px;
                margin-left:25px;
                border:10px solid blue;
                background:green;
            }
            .zi {
                float:left;
                margin-top:20px;
                width:200px;
                height:300px;
            }
        </style>
        <script>
            (function(){
                window.onload=function(){
                    var d=document.getElementById("d");
                    var con=document.getElementById("con");
                    var bo=document.getElementById("bo");
                    var zi=document.getElementById(‘zi‘);
                    zi.innerHTML=
                        "d.clientWidth="+d.clientWidth+"<br/>"+
                        "d.clientHeight="+d.clientHeight+"<br/>"+
                        "d.scrollWidth="+d.scrollWidth+"<br/>"+
                        "d.scrollHeight="+d.scrollHeight+"<br/>"+
                        "d.offsetWidth="+d.offsetWidth+"<br/>"+
                        "d.offsetHeight="+d.offsetHeight+"<br/>"+
                        "d.clientTop="+d.clientTop+"<br/>"+
                        "d.clientLeft="+d.clientLeft+"<br/>"+
                        "d.scrollTop="+d.scrollTop+"<br/>"+
                        "d.scrollLeft="+d.scrollLeft+"<br/>"+
                        "d.offsetTop="+d.offsetTop+"<br/>"+
                        "d.offsetLeft="+d.offsetLeft+"<br/>"+
                        "con.offsetTop="+con.offsetTop+"<br/>"+
                        "con.offsetLeft="+con.offsetLeft+"<br/>";
                }
            })();
        </script>
    </head>

    <body id="bo">
        <div class="d" id="d">
            <div class="con" id="con">
                <a href="http://cyg7561.blog.163.com/" title="鬼眼邪神的博客">鬼眼邪神的博客</a>
            </div>
        </div>
        <div class="zi" id="zi">

        </div>
    </body>
</html>
    

在Chrome中的显示效果:

时间: 2024-11-08 20:44:10

JavaScript—— scroolleft----offsetleft 系列的含义以及浏览器兼容问题的相关文章

JavaScript初学者建议:不要去管浏览器兼容

如果可以回到过去的话,我会告诉自己这句话:"初学JavaScript的时候无视DOM和BOM的兼容性" 我初学时的处境 在我初学JavaScript的时候最头痛的就是浏览器兼容问题.在Firefox下面好好的代码放到IE就不能显示了,又或者是在IE能正常显示的代码在firefox又报错了. 前端开发工程师的职责就包括跨浏览器开发.所以我就在还不了解JS这门语言本身的时候去花时间学习浏览器兼容知识,这样会让JS学习难度增加.但是不能兼容主流浏览器的代码不能用在实际项目中. DOM和BOM

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

Javascript事件模型系列(一)事件及事件的三种模型

转载: http://www.cnblogs.com/lvdabao/p/3265870.html 一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加百度的实习生面试,被问到事件模型,当时被问的一头雾水,平时敲onclick敲的挺爽,却没有关注到事件模型的整体概念.这个周末难得清闲,决定就javascript中的事件模型写个系列,算是对知识点的一个

jQuery-1.9.1源码分析系列(七) 钩子(hooks)机制及浏览器兼容

处理浏览器兼容问题实际上不是jQuery的精髓,毕竟让技术员想方设法取弥补浏览器的过错从而使得代码乱七八糟不是个好事.一些特殊情况的处理,完全实在浪费浏览器的性能:突兀的兼容解决使得的代码看起来既不美观也也不能对前端技术有任何提升.但是不管怎么说,只要不同的浏览器存在,就有可能出现兼容性问题,我们还必须去解决.比较好的是jQuery提供了一些比较优雅的浏览器兼容方案. 在处理浏览器兼容问题的时候最没有技术含量的方式是if…else..分支判断.jQuery中用到很多处理兼容的方法:多用于普通兼容

JavaScript权威指南第13章 web浏览器中的javascript

13.1 客户端javascript window对象是所有的客户端javascript特性和api的主要接入点.表示浏览器的一个窗口,可以通过window对象来引用它. window 的方法 alert() prompt() confirm() 13.2 在html里嵌入javascript 4种方法: 内联:放置在<script></script>标签之中 外部引入:<script src="   "></script> html程序

JavaScript方式判断是否为移动端浏览器

<script type="text/javascript">              if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Opera Mobi|Windows CE|Symbian|Windows Phone|POLARIS|lgtelecom|nokia|SonyEricsson|LG|SAMSUNG|Samsung/i                      .tes

JavaScript中 void(0) 的含义

JavaScript中 void (0)的含义 概述 void运算符执行传递给它的语句,然后返回undefined. 语法 void expression void 运算符通常仅仅被用来获取undefined的原始值,通常用void (0) (等同于void 0). 我们为什么不直接用undefined呢? undefined不是一个保留字(在JavaScript的某些环境中是个全局变量).这也就是说undefined是个可用的变量名,你可以给它任意赋值.例如: alert(undefined)

原生JavaScript运动功能系列(五):定时定点运动

原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaScript运动功能系列(四):多物体多值链式运动 这篇博客剖析一个问题,就是怎么实现将元素指定时间运动到目标位置?前面的博客都是在处理运动行为,没有对运动时间做任何限定,只是因为清晰的分析运动行为和实现原理,要想一个动画函数具备健全的功能,并且可以随意使用,通过参数设定动画执行时间是非常有必要的一个

JavaScript中浏览器兼容问题

浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分.我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览器有没有这种能力,即判断当前浏览器是否支持要调用的属性或者方法.下面做了一些简短的介绍. 1.innerText 和 innerContent 1)innerText 和 innerContent 的作用相同 2)innerText IE8之前的浏览器支持 3)innerContent 老版本的Firefox支持 4)新版本的浏览器两种方式都支持 // 老版本浏览器