JS基础入门篇（二十四）—DOM（下）

DolphinThinker

2019-06-27

1.offsetLeft/offsetTop

offsetLeft/offsetTop : 到定位父级节点的距离.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            padding: 20px;
        }
        #wrap{
            width: 100%;
            height: 50px;
            border: 1px solid black;
            position: absolute;
        }
        #inner{
            background: yellow;
        }
        #content{
            width: 200px;
            height: 100px;
            margin-left: 30px;
            background: red;
            position: absolute;
            left: 100px;
            border:10px solid black;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="inner">
            <div id="content"></div>
        </div>
    </div>
    <script>
        var content=document.getElementById("content");
        console.log(content.offsetLeft);//130
        console.log(content.offsetTop);//40
    </script>
</body>
</html>

2.node.getBoundingClientRect

返回值是一个对象，包含了元素盒模型的详细信息(可视大小)；
    取对象中详细的属性值(相对于浏览器可视区域)。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
    body{
        margin: 0;
    }
    #wrap{
        position: relative;
        width:400px;
        height:400px;
        border: 1px solid #000;
        left: 100px;
        top: 200px;
    }
    #box{
        width:100px;
        height:150px;
        background-color:red;
        position: absolute;
        left: 100px;
        top: 200px;
        margin: 100px;
        padding: 10px;
        border: 30px solid #000;
    }
</style>
</head>
<body>
<div id="wrap">
    <div id="box"></div>
</div>
<!--
    node.getBoundingClientRect()
        返回值是一个对象，包含了元素盒模型的详细信息(可视大小)；
        取对象中详细的属性值(相对于浏览器可视区域)
-->
<script>
    var box = document.getElementById("box");
    console.log( box.getBoundingClientRect() );
    console.log( box.getBoundingClientRect().left );//盒子 左边 距离 可视区 左边 的距离  301
    console.log( box.getBoundingClientRect().right);//盒子 右边 距离 可视区 左边 的距离  481
    console.log( box.getBoundingClientRect().top);//盒子 顶部 距离 可视区 顶部 的距离 ,这个页面的滚动会发生变化   501
    console.log( box.getBoundingClientRect().bottom);//盒子 底部 距离 可视区 顶部 的距离,这个页面的滚动会发生变化   731
    console.log( box.getBoundingClientRect().width);//盒子 可视 宽度（就是不包括margin） 180
    console.log( box.getBoundingClientRect().height);//盒子 可视 高度（就是不包括margin）230
</script>
</body>
</html>

3.getAtrribute：获取元素属性

<body>
    <div id="box" class="div1" age=10></div>
    <script>
        var box=document.getElementById("box");
//-------------行间 自定义 属性 用getAttribute可以取到------------
        console.log(box.getAttribute("age"));//"10"
//-------------行间 自定义 属性 用.和[] 取不到---------------------
        console.log(box.age);//undefined
        console.log(box["age"]);//undefined

//------------------------------------------------------------
        box.gender="woman";
//-------------js中 自定义 属性 用.和[]可以取到------------
        console.log(box.gender);//"woman"
        console.log(box["gender"]);//"woman"
//-------------js中 自定义 属性 用getAttribute 取不到---------------------
        console.log(box.getAttribute("gender"));//null

    </script>
</body>

3.setAttribute和removeAttribute

setAttribute:设置的自定义属性在行间。
removeAttribute：删除行间所在的自定义属性。

<body>
    <img id="img" _src="./2.jpg" src="1.jpg"/>
    <script>
        var img = document.getElementById("img");
        document.onclick = function(){
            img.setAttribute( "src", img.getAttribute("_src") );//点击页面后，将图片1换成图片2
        };
        img.setAttribute( "s", img.getAttribute("_src") );//在行间设置自定义属性 s="./2.jpg".
        console.log(img.getAttribute("s"));
        setTimeout(function(){
            img.removeAttribute( "s" );//页面打开1s后，删除行间设置的自定义属性。
        },1000)
    </script>
</body>

4.移入移出效果

移入当前数字，数字的前后背景变色。点击查看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
<body>
    <script>
        var ul=document.getElementsByTagName("ul")[0];
        var li=ul.getElementsByTagName("li");
        var now=li[0];
        for(var i=0;i<li.length;i++){
            li[i].onmouseover=function () {
                //清除上一次的颜色
                now.style.background="";
                now.previousElementSibling && (now.previousElementSibling.style.background="");
                now.nextElementSibling && (now.nextElementSibling.style.background="");

                //给此次移上去的li添加颜色
                this.style.background="red";
                this.previousElementSibling && (this.previousElementSibling.style.background="pink");
                this.nextElementSibling && (this.nextElementSibling.style.background="pink");

                //将此次对应的li赋值给now。now就知道此次指的是哪个li。
                now=this;
            }
        }
    </script>
</body>
</html>

js dom offsettop