offsetWidth和clientWidth

offsetWidth和clientWidth在項目

大家好,又见面了,我是你们的朋友全栈君。

項目–移動框中使用到了clientX/Y和offsetWidth,在此來記錄使用方法

offset系列:偏移量,動態的大小,位置(偏移量)等等…

offsetLeft:

是相對於父親的偏移量,當元素的父元素有設置定位(position:relative/absolute)時,會返回元素對父元素相對左方的距離。若沒有所有父元素都沒有設置定位,則會以BODY為主

語法: (number =) element.offsetLeft;

offsetTop:返回元素對父元素相對上方的距離

與offsetLeft相似,返回的是與父親相對上方的距離。

語法:(number =) element.offsetLeft;

offsetHeight , offsetWidth: content+padding2+border2

返回的參數為不單位的參數。

var offsetWidth =element.offsetWidth;

在这里插入图片描述

在这里插入图片描述

offset跟style雖然都是還元素的寬高大小有關,但是還是有不一樣的區別
1.style.width是只能獲取到內嵌的樣式也就是如果樣式寫在css裡面則是獲取不到的,但是offsetWidth則可以
2.單位
3.offsetWidth是包含了borderr跟padding,style.width則沒有
4.offsetWidth通常用於獲取值,style.wdith用來改變值
下面為總結:
:在这里插入图片描述
(以上總結來自pink老師課程截圖!!)

setoffParent:

console.log(son.setoffParent) //返回帶有定位的父親,否則返回body
console.log(son.parentNode) //不管父親有沒有定位,都只返回最近的親爸爸!!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/163019.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 以太坊钱包开发「建议收藏」

    以太坊钱包开发「建议收藏」目前的公链项目,影响力最大的应该就数以太坊和比特币了,其他的多数公链,基本上都是借鉴了以太坊和比特币公链项目而设计开发的。了解区块链的人都知道,比特币和以太坊这两个公链项目的差距还是挺大的,故而他们的钱包开发也是特别不一样的。本章我们将详细讲解以太坊钱包原理和开发流程,涉及到的内容有以下这些:依托钱包节点方式开发钱包,但这种方式的缺点就keystore生成存放到区块的节点上;非确定性以…

    2022年8月30日
    2
  • 深入理解FT,DTFT,DFT 之间的关系[通俗易懂]

    学习了数字信号处理之后,被里面的几个名词搞的晕头转向,比如DFT、DTFT、FS、FT、FFT、DFS等,参考整理的资料,重新写了一下各种变换的概念。 学过卷积,我们都知道有时域卷积定理和频域卷积定理,在这里只需要记住两点:1.在一个域的相乘等于另一个域的卷积;2.与脉冲函数的卷积,在每个脉冲的位置上将产生一个波形的镜像。(在任何一本信号与系统课本里,此两条性质有详细公式证明) 下面,就用这两…

    2022年4月3日
    219
  • 关于月亮的诗句_0x38是多少

    关于月亮的诗句_0x38是多少一些关于windows相关的书,书中提到扫描码的概念:扫描码的最低7为(0~6位)是描述码值,而最高位(7位)就描述该键是否被按下了。所以要想知道该键是否被按下就必须与0x80(1000000)相与。例如GetKeyState(VK_UP)&0x80或KeyStateBuffer[DIK_ESCAPE]&0x80.同时,在ANSIC标准中…

    2022年9月13日
    0
  • Tomcat全攻略

    Tomcat全攻略

    2021年12月15日
    51
  • 转引的注释怎么写_java注释模板

    转引的注释怎么写_java注释模板如题,使用idea的时候,因为它预定义的注释样式不尽人意,但还好的是支持自定义模板。自定义模板File->Settings图一然后搜索LiveTemplates,之后添加一个自己的模板组,我的是myGroup,然后是添加自己的快速注释快捷键等等,关于如何添加这个的过程大家可以在网上搜到很多,我就不多说了。敲黑板,重点来了,对于新手来说,如何配置下面这部分无…

    2022年9月28日
    0
  • 惠普台式机如何装系统_惠普的台式机如何用u盘安装系统

    惠普台式机如何装系统_惠普的台式机如何用u盘安装系统惠普在计算机行业是一个很有声誉的品牌,无论是台式机还是笔记本,惠普都是一款值得考虑和购买的品牌产品之一。但是当计算机系统出了问题需要重装系统时,很多人并不知道如何进行系统的重装,那么惠普的台式机如何进行重装系统呢?下面介绍一下台式小机惠普电脑怎么装系统。惠普电脑装系统步骤阅读1、打开浏览器搜索云骑士官网,找到云骑士官网并点击打开。2、在官网下载云骑士一键重装系统软件,下载后打开云骑士装机大师。3、…

    2022年8月13日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号