• 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. 消息队列那么多，为什么建议深入了解下RabbitMQ？

    你为啥要在项目中选择xxx消息中间件? 提起消息队列,也许你的脑海里会不自觉地蹦出好多概念:JMS.Kafka.RocketMQ.AMQP.RabbitMQ.ActiveMQ.Pulsar.Redis ...

  2. Java（21）内部类

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

  3. Noip模拟12 2021.7.12

    T1 interval 亏得昨天晚上改掉了T3并且理解了单调栈,今天一扫这题目就知道要用啥了. 先预处理出以a[i]为最大值的最大左右区间.然后再将a[i]取%!!!是的,要不然会影响单调栈的使用.. ...

  4. OTA测试介绍

    OTA 测试介绍 手机的无源测试和有源测试 当前在手机射频性能测试中越来越关注整机辐射性能的测试,这种辐射性能反映了手目前主要有两种方法对手机的辐射性能进行考察:一种是从天线是目前较为传统的天线测试方 ...

  5. 单片机stm32零基础入门之--初识STM32 标准库

    CMSIS 标准及库层次关系 因为基于Cortex 系列芯片采用的内核都是相同的,区别主要为核外的片上外设的差异,这些差异却导致软件在同内核,不同外设的芯片上移植困难.为了解决不同的芯片厂商生产的Co ...

  6. Hash算法：双重散列

    双重散列是线性开型寻址散列(开放寻址法)中的冲突解决技术.双重散列使用在发生冲突时将第二个散列函数应用于键的想法. 此算法使用: (hash1(key) + i * hash2(key)) % TAB ...

  7. SQL Server 插入、更新和删除数据

    1.主要内容 ● 通过SSMS,插入.更新和删除表数据 ● 通过INSERT语句向表中插入数据 ● 通过UPDATE语句更新表内数据 ● 通过DELETE语句删除表内数据 ● 使用INSERT.UPD ...

  8. JS控制文本框禁止输入特殊字符

    JS 控制不能输入特殊字符<input type="text" class="domain" onkeyup="this.value=this. ...

  9. hdu 1198 Farm Irrigation（并查集）

    题意: Benny has a spacious farm land to irrigate. The farm land is a rectangle, and is divided into a ...

  10. hdu 3635 Dragon Balls（并查集）

    题意: N个城市,每个城市有一个龙珠. 两个操作: 1.T A B:A城市的所有龙珠转移到B城市. 2.Q A:输出第A颗龙珠所在的城市,这个城市里所有的龙珠个数,第A颗龙珠总共到目前为止被转移了多少 ...