• 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. 使用ShardingSphere-JDBC完成Mysql的分库分表和读写分离

    1. 概述 老话说的好:选择比努力更重要,如果选错了道路,就很难成功. 言归正传,之前我们聊了使用 MyCat 实现Mysql的分库分表和读写分离,MyCat是服务端的代理,使用MyCat的好处显而易 ...

  2. JavaCPP快速入门(官方demo增强版)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  3. SpringCloud微服务实战——搭建企业级开发框架（六）：使用knife4j集成Swagger2接口文档

    knife4j是为集成Swagger生成api文档的增强解决方案,前后端Java代码以及前端Ui模块进行分离,在微服务架构下使用更加灵活, 提供专注于Swagger的增强解决方案,不同于只是改善增强前 ...

  4. 微信小程序的实现原理

    一.背景 网页开发,渲染线程和脚本是互斥的,这也是为什么长时间的脚本运行可能会导致页面失去响应的原因,本质就是我们常说的 JS 是单线程的 而在小程序中,选择了 Hybrid 的渲染方式,将视图层和逻 ...

  5. 热身训练1 Problem B. Harvest of Apples

    http://acm.hdu.edu.cn/showproblem.php?pid=6333 题意: 求 C(0,n)+C(1,n)+...+C(m,n) 分析: 这道题,我们令s(m,n) = C( ...

  6. linux下创建文件的文件权限问题

    今天发现创建文件的权限和自己规定的权限不一致,了解到了权限掩码的问题,这里总结一下. 首先权限掩码umask是chmod配套的,总共为4位(gid/uid,属主,组权,其它用户的权限),不过通常我们都 ...

  7. 挂载nfs存储

    查看nfs服务器上提供了哪些nfs目录 showmount -e 172.16.3.8 使用showmount前需要安装nfs-utils包 yum install nfs-utils -y 挂载nf ...

  8. 新手使用python以及pycharm看过来

    前言 随着互联网时代的进步,人类与计算机之前的沟通交流越来越便捷,自此交流的媒介--编程语言吸引力更多的人学习,今天我们就来谈谈当前市面上最火的编程语言 1.文件的概念 什么是文件夹.文件 其实是操作 ...

  9. ICMP 协议仿真及ping命令用途

    1.实验目的 加深对 IPv4 协议首部各定义域的理解,掌握路由表的结构和基本配置命令,熟悉 ICMP 的调试操作. 2.实验原理 IPv4 协议定义,网络层协议的相关 RFC 定义和描述. 3.实验 ...

  10. spring security之 默认登录页源码跟踪

    spring security之 默认登录页源码跟踪 ​ 2021年的最后2个月,立个flag,要把Spring Security和Spring Security OAuth2的应用及主流程源码研究透 ...