网页卷去的距离与偏移量

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

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

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

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

<!DOCTYPE HTML>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
        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横向滚动条滚动的距离
        }
    </script>
</head>
<body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px">
<div style="width:60%;border-right:1px dashed red;float:left;">
    <div style="float:left;">
        <div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">
            <div style="height:500px;width:400px">请调整横竖滚动条后,点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>
        </div>
        <input type="button" value="点击我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/>
    </div>

</div>
<div style="width:30%;float:left;">
    <ul style="list-style-type: none; line-height:30px;">结果:
        <li>offsetTop : <span id="li1"></span></li>
        <li>offsetLeft : <span id="li2"></span></li>
        <li> scrollTop : <span id="li3"></span></li>
        <li>scrollLeft : <span id="li4"></span></li>
    </ul>

</div>
<div style="clear:both;"></div>
</body>
</html>
时间: 2024-10-13 16:57:53

网页卷去的距离与偏移量的相关文章

浏览器滚动条卷去的高度

1.之前我们学习的JS盒子模型中:client系列/offset系列/scrollWidth // scrollHeight都是"只读"属性->只能通过属性获取值,不能通过属性修改元素 //的样式 // 2.scrollTop//scrollLeft:滚动条卷去的高度/宽度(这两个属性是唯一"可读写") // 我们的scrollTop的值是存在边界值(最大和最小值的),我们设置的值比最小值小或者比最大值大都没用,起到效果的依然是边界值 //最小值是零 // b

文档高度和卷去的高度

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

获取网页被卷去的高度scrollTop

document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效.比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0:反之亦然.所以,如果要得到网页的真正的scrollTop值,可以这样: var scrollTop=document.body.scrollTop+document.documentElement

javascript DOM对象(2)

访问兄弟节点 1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中). 语法: nodeObject.nextSibling 说明:如果无此节点,则该属性返回 null. 2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中). 语法: nodeObject.previousSibling 说明:如果无此节点,则该属性返回 null. 注意: 两个属性获取的是节点.Internet Explorer 会忽略节点间生成的空白文本节点(

js操作dom对象

属性: 1Attributes     存储节点的属性列表(只读) 2childNodes     存储节点的子节点列表(只读) 3dataType     返回此节点的数据类型 4Definition     以DTD或XML模式给出的节点的定义(只读) 5Doctype     指定文档类型节点(只读) 6documentElement     返回文档的根元素(可读写) 7firstChild     返回当前节点的第一个子节点(只读) 8Implementation     返回XMLD

JS DOM对象,控制HTML元素

1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合,DOM节点有: 1. 元素节点:上图中<html>.<body>.<p>等都是元素节点,即标签. 2. 文本节点:向用户展示的内容,如<li>...</li>中的Ja

学习笔记:JavaScript-进阶篇

1.二维数组 二维数组的表示: myarray[ ][ ] var myarr=new Array();  //先声明一维 for(var i=0;i<2;i++){  //一维长度为2 myarr[i]=new Array();  //再声明二维 for(var j=0;j<3;j++){  //二维长度为3 myarr[i][j]=i+j;  // 赋值,每个数组元素的值为i+j } } 2.返回星期方法 <script type="text/javascript"

慕课网学习笔记02

如何利用CSS进行网页布局 内容来自慕课网 浮动(float)和 绝对定位(position:absolute)可以让元素脱离文档流. 清除浮动可以理解为打破横向排列. 清除浮动的关键字是clear,官方定义如下: 语法: clear : none | left | right | both 取值: none : 默认值.允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 CSS浮动及清除浮动通俗讲解 网页布局基础

JavaScript进阶--慕课网学习笔记

                     JAVASCRIPT-进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字母.下划线.美元符号和数字.如下: 正确: mysum _mychar $numa1 错误: 6num  //开头不能用数字 %sum //开头不能用除(_ $)外特殊符号,如(%  + /等) sum+num //开头中间不能使用除(_ $)外特殊符号,如(%  + /等) 2.变量名区分大小写,