• offsetParent:返回该元素有定位的父级，如果父级都没有定位则返回body
  • offsetTop:返回元素相对父级（带有定位的父级）上方的偏移
  • offsetLeft:返回元素相对父级（带有定位的父级）左边框的偏移
  • offsetWidth:返回自身的宽度，包括padding、border、内容区，返回数值不带单位
  • offsetHeight:返回自身的高度，包括padding、border、内容区，返回数值不带单位
  • style.width 只能获取行内样式的数据，返回有单位，能用js修改数值
  • offsetWidth只能读不能改，返回无单位

注意：<style></style>要放在js代码前面，js中才能正确获取offset系列属性。如果style代码要放在js代码后面，需要使用 window.onload 等待资源加载完毕再执行js代码。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <div class="parent">

            <div class="child">child</div>

            <div id="style" style="width: 88px;height: 66px;background-color: #00FFFF;">

                test style

            </div>

        </div>

    </body>

    <script>

    window.onload = function(){

        /**

         * offsetParent:返回该元素有定位的父级，如果父级都没有定位则返回body

         *

         * offsetTop:返回元素相对父级（带有定位的父级）上方的偏移

         * offsetLeft:返回元素相对父级（带有定位的父级）左边框的偏移

         * offsetWidth:返回自身的宽度，包括padding、border、内容区，返回数值不带单位

         * offsetHeight:返回自身的高度，包括padding、border、内容区，返回数值不带单位

         *

         * style.width 只能获取行内样式的数据，返回有单位，能用js修改数值

         * offsetWidth只能读不能改，返回无单位

         * */

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

        console.log("parentNode:",parent.parentNode);

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

        console.log("offsetParent:", child.offsetParent);

        console.log("offsetTop:", child.offsetTop);

        console.log("offsetLeft:", child.offsetLeft);

        console.log("offsetWidth:", child.offsetWidth);

        console.log("offsetHeight:", child.offsetHeight);

        console.log("--------------------------------");

        var style = document.querySelector("#style");

        console.log("offsetWidth:",style.offsetWidth);

        console.log("style.width:",style.style.width);

        style.style.width = 111+"px";//这句生效，注意加单位

        console.log(style.style.width);

        style.offsetWidth = 222+"px";//这句不生效

        console.log(style.offsetWidth);

    }

    </script>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .parent {

            position: relative;

            display: inline-block;

            width: 200px;

            height: 200px;

            margin: 50px;

            background-color: #008000;

        }

        .child {

            display: inline-block;

            position: absolute;

            width: 50px;

            height: 50px;

            margin: 10px;

            border: 5px solid yellow;

            background-color: red;

        }

        #style{

            position: absolute;

            bottom: 0;

            right: 0;

        }

    </style>

</html>

style和offsetWidth的区别：

  • style.width 只能获取行内样式的数据，返回有单位，能用js修改数值
  • offsetWidth只能读不能改，返回无单位

对于“style.width 只能获取行内样式的数据 ”，如果没有行内样式，第一次获取style.width 会是空，但是给style.width 赋值后，再次获取能正常获取到值。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            div{

                width: 100px;

                height: 100px;

                position: absolute;

                background-color: #008099;

            }

        </style>

    </head>

    <body>

        <div></div>

    </body>

    <script type="text/javascript">

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

        // div.style.left = 102 + "px";

        console.log(div.style.left);

    </script>

</html>

div.style.left = 102 + "px";

console.log(div.style.left);

js offset系列属性的更多相关文章

  1. offset系列属性

    offset系列:获取元素的相关的样式属性的值 offsetwidth:获取元素的宽 offsetheight:获取元素的高 offsetleft:获取元素距离左边位置的值 offsettop;获取元 ...

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

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

  3. 系列属性(offset、scroll、client)

    一.offset系列属性 <div id="dv"></div> <!-- 已在style标签里设置div宽高各100px --> <sc ...

  4. JS组件系列——使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...

  5. javascript总结46: JS三大系列-方便的offset 家族

    1 offset 家族 offset这个单词本身是--偏移,补偿,位移的意思. js中有一套方便的获取元素尺寸的办法就是offset家族: 2  offset 结构介绍为: 3 offset常用属性 ...

  6. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  7. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...

  8. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（二）

    前言:上篇 JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) 介绍了下knockout.js的一些基础用法,由于篇幅的关系,所以只能分成两篇,望见谅!昨天就 ...

  9. JS组件系列——表格组件神器：bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

随机推荐

  1. Java（6）流程控制语句中分支结构if与switch

    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15201528.html 博客主页:https://www.cnblogs.com/testero ...

  2. 初学Python-day10 函数2

    函数 1.函数也是一种数据 函数也是一种数据,可以使用变量保存 回调函数(参数的值还是一个函数) 实例: def test(): print('hello world') def test1(a): ...

  3. SpringCloud微服务实战——搭建企业级开发框架（二）：环境准备

    这里简单说明一下在Windows系统下开发SpringCloud项目所需要的的基本环境,这里只说明开发过程中基础必须的软件,其他扩展功能(Docker,k8s,MinIO,XXL-JOB,EKL,Ke ...

  4. Hadoop集群的配置（一）

    摘要: hadoop集群配置系列文档,是笔者在实验室真机环境实验后整理而得.以便随后工作所需,做以知识整理,另则与博客园朋友分享实验成果,因为笔者在学习初期,也遇到不少问题.但是网上一些文档大多互相抄 ...

  5. [软软软]技术博客-Commitizen优化git commit

    工具介绍 commitizen/cz-cli是一个规范git commit的工具,使用它代替git commit能够方便有效地写好提交的log,使得团队项目的版本信息更清晰. 安装 (全局安装) np ...

  6. Noip模拟40 2021.8.15

    T1 送花 按照题解意思说是扫描线题,但我觉得像一个线段树优化$dp$ 主要思想一样,就是暴力枚举右端点,同时维护左端点的最值, 考虑两种情况, 如果左端点在$r$扫到的数$i$上一次出现的位置之前, ...

  7. 震惊，本Orzer下阶段直接怒送四个笑脸

    众所周知,在hzoi帝国中,Wzx是最菜的.那么究竟有多菜呢?下面就和小编一起来看看吧. 近日,hzoi最菜的wzx在第四阶段竟然怒送4个笑脸,同机房神犇直呼wzx太菜了! 以上就是wzx第四阶段怒送 ...

  8. Linux多线程实例解析

    Linux系统下的多线程遵循POSIX线程接口,称为 pthread.编写Linux下的多线程程序,需要使用头文件pthread.h,连接时需要使用库libpthread.a.顺便说一下,Linux ...

  9. 如何用PADS进行PCB设计？这6步就够了

    在使用PADS进行PCB设计的过程中,需要对印制板的设计流程以及相关的注意事项进行重点关注,这样才能更好的为工作组中的设计人员提供系统的设计规范,同时也方便设计人员之间进行相互的交流和检查. 02 设 ...

  10. 面试官问：说说你对Java函数式编程的理解

    常见的面试问题 总结一下,在Java程序员的面试中,经常会被问到类似这样的问题: Java中的函数式接口是什么意思? 注解 @FunctionalInterface 的作用是什么? 实现一个函数式接口 ...