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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • linux将目录移动到指定目录下_shell获取文件所在路径

    linux将目录移动到指定目录下_shell获取文件所在路径摘要腾兴网为您分享:第七应用,flash29,信息来电闪光灯,优惠购,实况足球2018,汕大附一,同学聚会简单通知书,cajviewer,惠普deskjet1010,英魂之刃,运动世界,建行大学,爱奇艺会员,sketchup渲染器,电脑尺子,中俄边境游,山东政务服务网等知识经验教程,欢迎大家关注腾兴网。linux系统下,用户根据需求来进行各项操作,有小伙伴想移动文件,操作起来不大容易,linux…

    2022年10月5日
    4
  • js三目运算符使用及嵌套

    js三目运算符使用及嵌套三目运算符基础格式:条件?a:b;下面根据一个实例来解释用法 vara=10;varb=5;varc=a>b?a:b;//定义一个c,如果a>b,那么取冒号前面的值(这里为a),如果a<=b,那么取冒号后面的值(这里为b)console.log(c);作用:三目运算符可…

    2022年6月17日
    57
  • lua中的weak table及内存回收collectgarbage

    弱表(weaktable)是一个很有意思的东西,像C++/Java等语言是没有的。弱表的定义是:Aweaktableisatablewhoseelementsareweakreferences,元素为弱引用的表就叫弱表。有弱引用那么也就有强引用,有引用那么也就有非引用。我们先要厘这些基本概念:变量、值、类型、对象。(1)变量与值:Lua是一个dynamicallyty

    2022年4月7日
    95
  • token多平台身份认证架构设计思路

    点击上方“全栈程序员社区”,星标公众号 重磅干货,第一时间送达 作者:哈莫 cnblogs.com/beer/p/6029861.html 1、概述 在存在账号体系的信息系统中,对…

    2021年6月28日
    88
  • 惠普电脑蓝屏开不了机怎么解决_hp服务器售后电话800

    惠普电脑蓝屏开不了机怎么解决_hp服务器售后电话800在日常生活中,电脑出现蓝屏的无法启动的问题很常见,怎么处理电脑蓝屏问题呢?下面是小编为大家整理的关于hp电脑蓝屏后无法启动的相关资料,希望对您有所帮助!hp电脑蓝屏后无法启动的解决方法很多时候电脑蓝屏是因为电脑的硬件,电脑关机完成后,我们可以断开电脑的电源,然后对我们的内存条擦拭后,从新装机到我们的电脑主板上。清理电脑的各项主板接口也是必须的,我们可以根据顺序,依次清理电脑的各个接口,完成后即可。…

    2022年8月13日
    4
  • 什么是IO流_io流实现

    什么是IO流_io流实现什么是IO流先看一段百度上的解释:当然:如果你看不懂,那么你只需要记住下面3句话.1.(1).我们知道,每个人家里喝的水都是从自来水厂来的,自来水厂的水又是从水源地来的,(2).水是通过水管来的。(3).那么这当中的水流,便可以理解为IO流。2. 那么JAVA中的IO流呢; (1).在java中,java就是自来水厂,水源地就是源,家就是目的(2)./

    2022年10月20日
    2

发表回复

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

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