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)
上一篇 2022年7月22日 下午5:36
下一篇 2022年7月22日 下午5:36


相关推荐

  • flex弹性盒子布局(详细)

    flex弹性盒子布局(详细)弹性盒模型 1 伸缩容器 displayFlex 是 FlexibleBox 的缩写 意为 弹性布局 用来为盒状模型提供最大的灵活性 任何一个容器都可以指定为 Flex 布局 采用 Flex 布局的元素 称为 Flex 容器 flexcontaine 简称 容器 它的所有子元素自动成为容器成员 称为 Flex 项目 flexitem 简称 项目 容器默认存在两根轴 水平的主轴 mainaxis 和垂直的交叉轴 crossaxis 主轴的开始位置 与边框的交叉点 叫做 m

    2026年3月17日
    2
  • 数据结构 哈希表设计

    实验6哈希表设计一、实验目的熟练掌握哈希表的构造方法,深刻理解哈希表与其他结构表的实质性差别。 二、实验内容程序的功能是对一批关键字集合采用除留余数法和线性探测再散列的方法解决冲突来建立相应的哈希表和完成查找过程及平均查找长度的计算。【问题描述】    研究哈希(HAXI)表查找技术的两个重要问题是:构造HAXI函数和处理冲突。现在要求针对某个数据集合中的关键字设

    2022年4月9日
    56
  • 树莓派AI Agent全面实战指南:CrewAI开源框架替代Manus邀请码,实现多LLM代理协作与智能任务执行应用解析

    树莓派AI Agent全面实战指南:CrewAI开源框架替代Manus邀请码,实现多LLM代理协作与智能任务执行应用解析

    2026年3月15日
    2
  • Linux下安装libiconv

    Linux下安装libiconv1、下载libiconv库wgethttp://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.13.1.tar.gz2.解压,然后进入解压后的目录tarzxvflibiconv-1.13.1.tar.gz&&cdlibiconv-1.13.13.配置libiconvsudo./configure–prefix=/usr/local或者sudo./configure–prefix=…

    2025年8月12日
    7
  • 文本相似度计算python lda_python文本相似度计算

    文本相似度计算python lda_python文本相似度计算原标题 python 文本相似度计算数据挖掘入门与实战公众号 datadw 步骤分词 去停用词词袋模型向量化文本 TF IDF 模型向量化文本 LSI 模型向量化文本计算相似度理论知识两篇中文文本 如何计算相似度 相似度是数学上的概念 自然语言肯定无法完成 所有要把文本转化为向量 两个向量计算相似度就很简单了 欧式距离 余弦相似度等等各种方法 只需要中学水平的数学知识 那么如何将文本表示成向量呢 词袋模型

    2025年11月26日
    6
  • vs2008 sp1怎么安装_vs2008激活成功教程版

    vs2008 sp1怎么安装_vs2008激活成功教程版VS2005SP1forvista安装小记

    2022年10月5日
    2

发表回复

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

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