• 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. Windows使用Git的vim编辑器编译运行程序

    Windows配置gcc 新建一个main.c $ touch main.c #在当前目录下创建main.c $ mkdir folder #在当前目录下创建folder文件夹 $ rm main.c ...

  2. k8s学习笔记（3）- kubectl高可用部署，扩容，升级，回滚springboot应用

    前言:上一篇通过rancher管理k8s,部署服务应用扩容,高可用,本篇介绍kubectl命令行部署高可用集群节点,测试升级.扩容等 1.测试环境:3节点k3s,使用其中2节点(ubuntunode1 ...

  3. 如果你还不知道Apache Zookeeper？你凭什么拿大厂Offer！！

    很多同学或多或少都用到了Zookeeper,并知道它能实现两个功能 配置中心,实现表分片规则的统一配置管理 注册中心,实现sharding-proxy节点的服务地址注册 那么Zookeeper到底是什 ...

  4. Java：容器类线程不安全

    Java:容器类线程不安全 本笔记是根据bilibili上 尚硅谷 的课程 Java大厂面试题第二季 而做的笔记 1. Collection 线程不安全的举例 前言 1.当我们执行下面语句的时候,底层 ...

  5. 【二食堂】Beta - Scrum Meeting 11

    Scrum Meeting 11 例会时间:5.26 18:30~18:50 进度情况 组员 当前进度 今日任务 李健 1. 文本导入.保存部分的工作比想象中的难,还需要一些时间完成issue 1. ...

  6. Beta阶段第六次会议

    第六次会议 时间:2020.5.22 完成工作 姓名 任务 难度 完成度 xyq 1.编写技术博客 中 90% ltx 1.编写小程序2.添加全局变量之后页面无法加载的bug 中 90% lm(迟到) ...

  7. 【二食堂】Alpha - 项目展示

    项目展示 1. 团队介绍 二食堂很难排队 姓名 介绍 职务 刘享 热爱游戏,尤其是RPG和metrovinia类的游戏. 会C/C++, python, java. 后端 左正 一个普通的大学生,Py ...

  8. csp-s 2021

    T1 廊桥分配 当一架飞机抵达机场时,可以停靠在航站楼旁的廊桥,也可以停靠在位于机场边缘的远机位. 乘客一般更期待停靠在廊桥,因为这样省去了坐摆渡车前往航站楼的周折. 然而,因为廊桥的数量有限,所以这 ...

  9. 零基础学习Linux所必备的七大习惯

    对于很多Linux初学者来说,在刚开始使用linux系统时会感到很多的不适.这里为大家整理了自己以前linux入门时别人告诉我的七个习惯.我相信如果你运用了这七个习惯,在你使用Linux时你会感觉更安 ...

  10. Vue3学习（十）之 页面、菜单、路由的使用

    一.前言 好几天没更文了,周末真的太冷了,在家躺了一天不爱动.今天给暖气了,相对不那么冷了,就可以继续更文了. 由文章标题不难看出,就是实现点击菜单跳转的意思,我写的很直白了,哈哈. 二.实现点击菜单 ...