<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

      <title>offset大家族</title>

      <style type="text/css">

      body,html{

         margin:0;

         padding:0;

         }

            .grandpa{

               margin-left:50px;

               width:500px;

               height:300px;

               background:#ff9933;

               position:relative;

               border:5px solid #33ff00;

            }

            .father{

              width:300px;

              height:300px;

              background:#ff3366;

              padding:20px;

              border:5px solid #ffff00;

            }

            .son{

              width:100px;

              height:100px;

              background:#0000ff;

              padding:10px;

              border:5px solid #ccffcc;

            }

      </style>

 </head>

 <body>

    <div class="grandpa">

      <div class="father" style="position:absolute;left:300px">

        <div class="son" style="left:300px" ></div>

      </div>

    </div>

   <script type="text/javascript">

       var father=document.querySelector(".father");

       var grandpa=document.querySelector(".grandpa");

       var son=document.querySelector(".son");

        console.log(son.offsetWidth);//130

        console.log(son.offsetHeight);//130

        console.log(son.offsetLeft);//25

        console.log(son.offsetTop);//25

        console.log(son.offsetParent.className);//grandpa

        console.log(son.parentNode);//<div class="father"></div>

        console.log(son.style.left);//300px  这里虽然获得300px 但是由于没有设置position属性所以不起作用

        console.log(father.style.left);//300px

        son.offsetLeft="300";

        console.log(son.offsetLeft);//20

        son.style.left="500px";

        console.log(son.style.left);

        /*

          offsetWidth    元素本身的宽度  content+padding+border  动态

          offsetHeight   元素本身的高度  content+padding+border  动态

          offsetLeft        此元素左外边框到有定位的长辈的边框距离  就近长辈

          offsetTop        此元素右外边框到有定位的长辈的边框距离  就近长辈

          js没有right 和 bottom

          所以 right=son.offsetLeft+son.offsetWidth

                  top=son.offsetTop+son.offsetHeight

                 1. son.style.left   访问的话只能得到行内的style值

                  这样的div class="son" style="position:absolute;top:300px"></div>

                 2. 行内样式如果没有设置top值  style.top 得到的是空字符串 ""

                 3.offsetLeft 得到的是数字 30  而style.left得到的是字符串 30px

                 4.offsetLeft 是 onlyRead  就是只可以get  不能set   style.left 可以set  也可以get

                 5.offsetLeft 可以返回没有设置定位属性盒子的left

                   而style.left 不行  没有设置定位属性的盒子没有left top属性

                   虽然可以获得行内设置的left   style.left  300px

                   <div class="box" style="left:300px"></div>

                   但是没有作用  因为没有设置position

                 5.

                  如果想访问css style 还可以用以下方法

                  标准浏览器window.getComputedStyle(son)["left"];

                  IE  son.currentStyle("left");

               offsetParent  得到最近的有定位的长辈

               比较记忆

               parentNode   得到父节点  

        */

   </script>

 </body>

</html>

offset大家族(一)的更多相关文章

  1. JavaScript 特效之四大家族（offset/scroll/client/event）

      三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制)   三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以 ...

  2. Kafka 如何读取offset topic内容 (__consumer_offsets)

    众所周知,由于Zookeeper并不适合大批量的频繁写入操作,新版Kafka已推荐将consumer的位移信息保存在Kafka内部的topic中,即__consumer_offsets topic,并 ...

  3. offset、client、scroll开头的属性归纳总结

    HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...

  4. kafka主题offset各种需求修改方法

    简要:开发中,常常因为需要我们要认为修改消费者实例对kafka某个主题消费的偏移量.具体如何修改?为什么可行?其实很容易,有时候只要我们换一种方式思考,如果我自己实现kafka消费者,我该如何让我们的 ...

  5. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  6. margin（）与offset（）的区别

    margin() 简写属性在一个声明中设置所有外边距属性. offset() 方法返回或设置匹配元素相对于文档的偏移(位置).

  7. Excel——使用OFFSET、MATCH、COUNTA实现二级菜单

    如图所示,接下来提供两种办法实现: 1.将A.B.C.D定义为名称NAME. 2.设置一级菜单单元格数据有效性为NAME. 3.设置二级菜单格数据有效为: =OFFSET($A$1,MATCH($A6 ...

  8. Excel——OFFSET函数

    1.首先看下offset函数的参数设置: 说明:height,width表面它的返回值可以是一个数组,而并非一个值.这样,它就可以用于数据有效性等. 2.使用offset实现转置: 3.offset函 ...

  9. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

随机推荐

  1. linux创建新用户

    服务器只用root账号会有风险,最好是每个人使用一个账号. 1. 添加用户名 adduser linuxidc 2. 给这个用户名设置新密码 passwd linuxidc 3.授权 个人用户的权限只 ...

  2. SQLAlchemy-方言(Dialects)

    一: Dialects 文档是分为三个部分: SQLAlchemy ORM, SQLAlchemy Core, and Dialects. SQLAlchemy ORM:在SQLAlchemy ORM ...

  3. lucene-利用内存中索引和多线程提高索引效率

    转载地址: http://hi.baidu.com/idoneing/item/bc1cb914521c40603e87ce4d 1.RAMDirectory和FSDirectory对比 RAMDir ...

  4. JS实现逼真的雪花飘落特效

    逼真的雪花飘落特效 效果图: 图片素材 : --> ParticleSmoke.png 代码如下,复制即可使用: <!doctype html> <html> <h ...

  5. GreenPlum学习笔记：create table创建表

    二维表同样是GP中重要的存储数据对象,为了更好的支持数据仓库海量数据的访问,GP的表可以分成: 面向行存储的普通堆积表 面向列存储的AOT表(append only table) 当然AOT表也可以是 ...

  6. MySQL约束笔记

    MySQL 查看约束,添加约束,删除约束 添加列,修改列,删除列 · 查看表的字段信息:desc 表名; · 查看表的所有信息:show create table 表名; 添加主键约束:alter t ...

  7. Java 常用的几个lambda表达式

    Lambda表达式是Java 8一个非常重要的新特性.它像方法一样,利用很简单的语法来定义参数列表和方法体.目前Lambda表达式已经成为高级编程语言的标配,像Python,Swift,C#等都已经支 ...

  8. OpenCV处理直方图

    直方图可以用来描述各种不同的事物,如物体的色彩分布.物体边缘梯度模板,以及表示目标位置的当前假设. 简单的说,直方图就是对数据进行统计,将统计值组织到一系列事先定义好的bin中.bin中的数值是从数据 ...

  9. bzoj 2819

    2819 思路: 手工栈: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 500005 #define ma ...

  10. 自己封装的php Curl并发处理，欢迎提出问题优化。

    因为项目需要,发现一个一个发送请求实在太慢,无奈之下,我们可以封装一个并发处理的curl请求批处理句柄来减少重复创建句柄的问题 代码如下: /* *@param array $data url的参数 ...