js学习总结----获取元素的偏移量offset

前言:以前一直是看别人写的,然后学习点东西,现在也把自己的学习记录下来,给大家一个学习的机会,欢迎大家多多评论和推荐哈,共同进步。竟然还有六个人关注我了 ,哈哈 开心。我会继续写下去的。。

null和undefined都代表没有,但是null是属性存在值不存在,undefined是连这个属性都不存在

//例如
        document.parentNode//浏览器天生自带的一个属性:父亲节点的属性 null (因为一个页面中的document已经是最顶级元素了,它没有父亲)
        document.parentnode//undefined (因为没有parentnode这个属性)

1、parentNode:父亲节点  HTML结构层级关系中的上一级元素

var outer = document.getElementById(‘outer‘);
        var inner = document.getElementById(‘inner‘);
        var center = document.getElementById(‘center‘);

        center.parentNode //inner

2、offsetParent:父级参照物 在同一个平面中,最外层的元素是里面所有元素的父级参照物(和HTML层级结构没有必然的联系)

一般来说一个页面中所有元素的父级参照物都是body

document.body.offsetParent // null

想要改变父级参照物需要通过position定位来进行改变(absolute relative fixed 都可以进行改变  )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #outer{
            width:180px;
            height:180px;
            margin:50px auto;
            border:10px solid #000;
            background:orange;
            padding:50px;
        }
        #inner{
            width:80px;
            height:80px;
            padding:50px;
            border:10px solid #000;
            background:green;
        }
        #center{
            width:50px;
            height:50px;
            border:10px solid #000;
            background:red;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">
            <div id="center"></div>
        </div>
    </div>

    <script>
        var outer = document.getElementById(‘outer‘);
        var inner = document.getElementById(‘inner‘);
        var center = document.getElementById(‘center‘);

        outer.style.position = "relative";//这样inner和center的参照物都是outer
        center.offsetParent//outer
        inner.offsetParent//outer
        outer.offsetParent//body
        outer.style.position = "relative";//
        inner.style.position = "relative";
        center.offsetParent//inner
        inner.offsetParent//outer
        outer.offsetParent//body
    </script>
</body>
</html>

3、offsetTop/offsetLeft :当前元素(外边框)距离其父级参照物(内边框)的偏移距离

  具体如下图所示:

  下面是一个offset方法:等同于jQuery中的offset方法,实现获取页面中任意一个元素,距离body的偏移(包含左偏移和上偏移),不管当前元素的父级参照物是谁。获取的一个结果是一个对象{left:距离BODY的左偏移,top:距离BODY的上偏移}

  在标准的IE8浏览器中,我们使用offsetLeft/offsetTop其实是把父级参照物的边框已经算在内了。所以我们不需要自己在单独加边框了

  代码如下:  

function offset(curEle){
            var totalLeft = null,totalTop = null,par = curEle.offsetParent;
            //首先加自己本身的左偏移和上偏移
            totalLeft+=curEle.offsetLeft;
            totalTop+=curEle.offsetTop
            //只要没有找到body,我们就把父级参照物的边框和偏移也进行累加
            while(par){
                if(navigator.userAgent.indexOf("MSIE 8.0")===-1){
                    //累加父级参照物的边框
                    totalLeft+=par.clientLeft;
                    totalTop+=par.clientTop
                }

                //累加父级参照物本身的偏移
                totalLeft+=par.offsetLeft;
                totalTop+=par.offsetTop
                par = par.offsetParent;
            }

            return{
                left:totalLeft,
                top:totalTop
            }
        }
        console.log(offset(center).left)
时间: 2024-10-05 08:22:26

js学习总结----获取元素的偏移量offset的相关文章

轻松学习JavaScript二十一:DOM编程学习之获取元素节点的子节点和属性节点

我们这里所说的获取元素节点的所有子节点包含元素子节点和文本节点两种.还是拿上一篇博文的代码实例进行 分析: <span style="font-size:18px;"><span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

JS中如何获取元素

1.通过ID名称来获取元素: document get element by id 'link' document.getElementById('link'); 事件:鼠标事件.键盘事件.系统事件.表单事件.自定义事件 例:onclick 鼠标点击事件 onmouseover 鼠标移入事件 onmouseout 鼠标移出事件 如何添加事件: 元素.事件 (元素.onmouseover) 函数:可以理解为-命令,做一些事... function(函数的关键词) 语法: function abc(

js通用方法获取元素,节点父子关系查找

/* *通用方式来获取元素 * 1.通过id来获取元素document.getElementById('属性名') * 2.通过便签名来获取元素document.getElementsByTagName('属性名');得到的是一个数组 * 3.通过class属性来获取元素有兼容性问题document.getElementsByClassName('class属性名');得到是一个数组 * 4.通过name属性来获取元素存在兼容性问题document.getElementsByName('name

js通过class获取元素

<!doctype html> <html> <head> <meta charset="utf-8"> <meta charset="utf-8"> <title>通过class获取元素</title> <style> #box div { width:100px; height:100px; border:1px solid red; margin:10px; } #

js根据类名获取元素的底层原理

页面代码片段 <div></div> <div class="box fl">这是box</div> <div class="colorRed box3">这是box</div> <div></div> <div class="box">这是box</div> <div id="text"> &l

js动画之获取元素属性

首先我们要介绍一些知识 offsetWidth element.offsetWidth = width + padding + border; width 我们也知道element.style.width 这个属性一般用来修改属性,那么在获取这个属性的时候, 如果这个元素的的样式是定义在css的文件或者头样式中,都是获取不到的,只有行内样式才是获取到 <!DOCTYPE html> <html lang="en"> <head> <meta c

js学习总结----设置元素的样式值setcss

在JS给元素设置样式属性值,我们只能通过curEle.style[attr] = value 这种方式给元素设置行内样式 下面封装一个给当前元素的某一个样式属性设置值的方法(增加在行内样式上的):setCss() function setCss(curEle,attr,value){ //在JS中设置float样式值也需要处理兼容 if(attr==="float"){ curEle["style"]["cssFloat"] = value; c

JavaScript DOM编程 学习笔记-获取元素节点

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function() { //在编写html文档时需要确定id属性值是唯一的 //该方法为doc

js通过class获取元素getElementsByClassName函数封装

function getElementsByClassName( parent,tag,className ){ var aEls = parent.getElementsByTagName(tag); var arr = []; for (var i = 0; i < aEls.length; i++) { var aClassName = aEls[i].className.split(' '); for (var j = 0; j < aClassName.length; j++) {