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（下）的更多相关文章

  1. JS基础入门篇（十二）—JSON和Math

    1.JSON JSON: 对象格式的字符串 轻量的数据传输格式 注意事项: 键名 需要 使用 双引号 包起来 JOSN有两个方法:JSON.parse和 JSON.stringify. JSON.pa ...

  2. JS基础入门篇（十八）—日期对象

    1.日期对象 日期对象: 通过new Date()就能创建一个日期对象,这个对象中有当前系统时间的所有详细信息. 以下代码可以获取当前时间: <script> var t = new Da ...

  3. JS基础入门篇（十）— 数组方法

    1.join 作用: 将数组通过指定字符拼接成字符串.语法: string arr.join([separator = ',']);参数: separator可选,如果省略的话,默认为一个逗号.如果 ...

  4. JS基础入门篇（三十五）—面向对象（二）

    如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)

  5. Bootstrap入门（二十四）data属性

    Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...

  6. MyBatis基础入门《二十》动态SQL(foreach)

    MyBatis基础入门<二十>动态SQL(foreach) 1. 迭代一个集合,通常用于in条件 2. 属性 > item > index > collection : ...

  7. JS基础入门篇（二十七）—BOM

    虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...

  8. JS基础入门篇（二十四）—DOM（上）

    1.常用的节点类型,nodeType,attributes,childNodes. 1.元素节点 - 1 2.属性节点 - 2 3.文本节点 - 3 4.注释节点 - 8 5.文档节点 - 9 查看节 ...

  9. JS基础入门篇（三十四）— 面向对象（一）

    1.对象 对象的定义 : 对象 是 由 键值对 组成的无序集合. 创建对象两种方法 : 方法一 : 字面量方法 var obj = {name: "k"}; 方法二 : new O ...

随机推荐

  1. Activity 启动模式总结

    Activity 启动模式: 1. standard: 默认启动模式,每次启动一个Activity都会重新创建一个实例: 2. singleTop: 栈顶复用模式,新Activity位于任务栈的栈顶, ...

  2. apm 应用性能管理(启动优化/ 掉帧卡顿/ 耗电/ 内存泄漏等)

    APM 首先查看各个阶段耗时 : (环境变量设置 dyldPRINTSTATISTICS = 1选项,) 1. 启动优化 关键: 找到耗时的原因 t总 = t1 (premain) + t1(main ...

  3. 强哥新周报SQL

    因为数据口径的更改,所以.强哥的SQL 比较好用.不会出麻烦. 总共有四个 日常记录下,好好看. -- 2019年4月核销新客 SELECT yzm2.consignee_phone AS `会员手机 ...

  4. 关于JS读取DOM对象(标签)的自定义属性

    DOM对象对于js来说,是个很基础的元素,我们写js一般来说,都一定会对它进行操作.我们可以很方便地给它加上自定义的属性,比如: var test = document.getElementById( ...

  5. bootstrap基础模板页面,详细注释

    ​ <!--html5 骨架--> <!DOCTYPE html> <!--语言是中文简体--> <html lang="zh-cn"&g ...

  6. 简单DP入门（二） 最长上升子序列及其优化

    最长上升子序列解决问题: 有N个数,求出它最长的上升子序列并输出长度. 在题里不会讲的这么直白,这个算法往往会与其他的算法混在一起使用. 在这篇文章中不会出现其他的例题,为了让大家更好的理解,我只会对 ...

  7. exporter

    何为 Prometheus Exporter? Prometheus 监控基于一个很简单的模型: 主动抓取目标的指标接口(HTTP 协议)获取监控指标, 再存储到本地或远端的时序数据库. Promet ...

  8. 搜索的应用--计算最优解：Aizu - ALDS1_4_D Allocation

    搜索的应用-计算最优解 题目: You are given nn packages of wiwi kg from a belt conveyor in order (i=0,1,...n−1i=0, ...

  9. Appium移动端自动化：元素定位uiautomatorviewer

    一.启动uiautomatorviewer mac: 1.打开终端,进入Android/sdk/tools目录 2.打开uiautomatorviewer(我的路径是Android/sdk/tools ...

  10. Thymeleaf 遇到的问题

    1. 后台传递long类型的值作为 js 执行方法的参数,精准度失效解决办法 解决办法:用thymeleaf的拼接字符串方法来解决 例:<button class="btn btn-p ...