CSS之元素视图属性

1.clientLeft和clientTop

返回的是内容区域的左上角相对于整个元素左上角的位置(包括边框)

这里写图片描述

这里写图片描述

2.clientWidth和clientHeight

表示内容区域的高度和宽度,包括padding大小,但是不包括边框和滚动条

这里写图片描述

这里写图片描述

3.offsetLeft和offsetTop

offsetLeft和offsetTop表示相对于最近的祖先定位元素(CSS position 属性被设置为 relative、absolute 或 fixed 的元素)的左右偏移值

4.offsetParent

第一个祖定位元素(即用来计算上面的offsetLeft和offsetTop的元素)

offsetParent元素只可能是下面这几种情况:

  • <body>
  • position不是static的元素
  • body元素为定位元素的终极boss,所以其上头就没有其他定位元素了。也就是说body元素没有offsetParent

5. offsetWidth和offsetHeight

整个元素的尺寸(包括边框)

这里写图片描述

这里写图片描述

6.scrollLeft和scrollTop

scrollLeft和scrollTop表示元素滚动的像素大小。可读可写。这个玩意貌似我们用得比较多

7.scrollWidth和scrollHeight

表示整个内容区域的宽高,包括隐藏的部分。如果元素没有隐藏的部分,则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候,scrollHeight应该等用于scrollTop + clientHeight

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407463.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里巴巴指东打西,PC之后卖盒饭?

这两天&#xff0c;看到了数篇关于阿里巴巴的报道&#xff0c;核心内容都是阿里巴巴联手英特尔&#xff0c;发起主题为“助力中国”的电子商务推动计划&#xff0c;并将推出面向中小企业电子商务专用电脑的消息。从报道看&#xff0c;阿里巴巴将同英特尔合作&#xff0c;推出贴…

SQL-MSSQL-CODE大全

SqlServer数据库语句大全 /*********************************************************/ 目录清单CONTEXT LIST /*********************************************************/ 1.数据库DataBase 1.1数据库建立/删除create/drop database 1.2数据库备份与恢复backup/restore d…

JS中的bind()方法

Function.prototype.bind()方法 bind()方法主要就是将函数绑定到某个对象&#xff0c;bind()会创建一个函数&#xff0c;函数体内的this对象的值会被绑定到传入bind()第一个参数的值&#xff0c;例如&#xff0c;f.bind(obj)&#xff0c;实际上可以理解为obj.f()&#xff0c;这…

Vue之Vue.set动态新增对象属性

当我们给一个比如props中&#xff0c;或者data中被观测的对象添加一个新的属性的时候&#xff0c;不能直接添加&#xff0c;必须使用Vue.set方法 Vue.set方法用来新增对象的属性。如果要增加属性的对象是响应式的&#xff0c;那该方法可以确保属性被创建后也是响应式的&#x…

[精华] VI高级命令集锦

鉴于大家在使用VI 的时候有一定的陌生&#xff0c;在这里借花献佛&#xff0c;从兄弟版[SHELL]中整理出以下关于VI编程的高级技巧&#xff0c;希望对大家学习UNIX有所帮助&#xff0c;并希望大家能结合使用HPUX的心得体会对这些经验进行进一步的扩展。1.交换两个字符位置xp2.上…

C语言程序设计 文件操作函数

文件操作函数 C语言 (FILE fputc fgetc fputs fgets fscanf fprintf)在ANSI C中&#xff0c;对文件的操作分为两种方式&#xff0c;即流式文件操作和I/O文件操作&#xff0c;下面就分别介绍之。 一、流式文件操作 这种方式的文件操作有一个重要的结构FILE&#xff0c;FILE在std…

Vue之过渡动画

v-enter: 定义过渡开始时元素的状态。在元素被插入时生效&#xff0c;在下一个帧(下一帧也就是v-enter-active)移除(实际就是过渡将要开始之前&#xff0c;元素的状态) v-enter-active: 定义”进入过渡”的结束状态。在元素被插入时生效&#xff0c;在 transition/animation 完…

HTTP Live Streaming直播(iOS直播)技术分析与实现(转)

HTTP Live Streaming直播(iOS直播)技术分析与实现 转载于:https://www.cnblogs.com/chen-jt/p/3885223.html

AppleScript快速入门教程

基础语法 AppleScript 入门 一、这部分介绍注释,发出声音,弹窗 (1)简单入门 <1>多行注释 (* this is multi comment *) <2>发出响声beep 3(2)#表示使用"Daniel"(英国发音)发出声音,人员选择如下图1所示say "Hello,world" using "Daniel&…

BASH 中的字符串处理

得到长度%x"abcd" #方法一 %expr length $x 4 # 方法二 %echo ${#x} 4 # 方法三 %expr "$x" : ".*" 4 # expr 的帮助 # STRING : REGEXP anchored pattern match of REGEXP in STRING 复制代码查找子串%expr index $x "b" 2 %expr …

[c++基本语法]——构造函数初始化列表

c构造函数初始化成员变量列表&#xff1a; 1 #pragma once2 class Node3 {4 public:5 int data; // 权值6 Node *parent; // 父节点7 Node *left; // 左子节点8 Node *right; // 右子节点9 public: 10 // 该段代码是c的基本语法中的“…

行业开源应用集锦

06年为开放系统世界写的个封面报道&#xff0c;作者&#xff1a;顾宏军 对开源操作系统、开源数据库&#xff0c;到开源的Web服务器等&#xff0c;基础平台类的开源产品我们已很熟悉。这里&#xff0c;我们将品评从全球数以百万计的开源软件中&#xff0c;挑选出来的CRM、ERP、…

CSS之EM属性

什么是EM&#xff1f; 在一个空白的HTML文档内&#xff0c;你没有任何关于字体大小的声明而只使用默认设置。在大多数浏览器上为html和body标签的默认字体大小为100% 使用EM为单位一定要知道父元素的设置&#xff0c;因为EM是一个相对值&#xff0c;是一个相对于父元素的值 如…

vim多行增加缩进

在Normal Mode下&#xff0c;命令>>将对当前行增加缩进&#xff0c;而命令<<则将对当前行减少缩进。我们可以在命令前使用数字&#xff0c;来指定命令作用的范围。例如以下命令&#xff0c;将减少5行的缩进&#xff1a; 5<< 在Insert/Replace Mode下&#…

PyQt6 QTimer计时器控件

锋哥原创的PyQt6视频教程&#xff1a; 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计52条视频&#xff0c;包括&#xff1a;2024版 PyQt6 Python桌面开发 视频教程(无废话版…

前台关于跨域的警告A cookie associated with a cross-site resource at .........,代理服务器

前台关于跨域的警告A cookie associated with a cross-site resource at …&#xff0c;代理服务器 A cookie associated with a cross-site resource at … 解决该警告的方法&#xff1a; 在配置文件中添加配置如下&#xff1a; "proxy": {"/api": {&quo…