对象的宽度、top位置,x坐标属性
DOM对象
| DOM对象属性 | 对应css | 说明 | 读/写 | |
| width | obj.clientWidth=20 |
1. 内联样式 <p style="width:20px"></p> 2. 内部/外部CSS <style> |
在页面上返回内容的可视宽度 (内容+padding) 不包括边框,边距或滚动条 |
只读 |
| obj.scrollWidth=20 |
1. 内联样式 2. 内部/外部CSS |
子元素整个盒子宽度以及当前元素左侧padding值 (内容+padding) |
只读 | |
| obj.offsetWidth=20 |
1. 内联样式 2. 内部/外部CSS |
返回元素的宽度, 包括边框和填充 (内容+padding+border) |
只读 | |
| obj.style.width="20px" | <p style="width:20px"></p> |
在内联中定义才能读到值,否则为空 |
可写 | |
| obj.width | 这个属性并没有 | |||
| height | 与width一样 | |||
| top | obj.offsetTop=20 | 元素border外侧相对父元素border内侧垂直方向的偏移量 | 只读 | |
| obj.scrollTop=20 |
overflow:scroll时会出现滚动条 当前内容的顶部相对原始内容顶部的距离 |
可写 | ||
| obj.style.top="20px" |
在内联中定义才能读到值,否则为空 |
可写 | ||
| left | 与top一样 |

Window窗口
| 属性 | 说明 | |
| width | window.innerWidth | 窗口的文档显示区的宽度 |
| window.outerWidth | 窗口的外部宽度,包含工具条与滚动条 | |
| height | 与width相似 | |
| left | window.screenLeft | 返回相对于屏幕窗口的x坐标 |
| top | 与left相似 |
event事件
纵坐标与横坐标类似,这里只列出横坐标
| 属性 | 说明 |
| event.screenX | 鼠标指针相对于电脑屏幕的水平坐标 |
| event.clientX |
鼠标指针向对于浏览器页面(或可见区域)的水平坐标 |
| event.pageX |
鼠标指针相对于整个文档的水平坐标 |

对象的宽度、top位置,x坐标属性的更多相关文章
- javascript中常用坐标属性offset、scroll、client
原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...
- javascript:与获取鼠标位置有关的属性
javascript并没有mouse对象,获取鼠标坐标要靠强大的event对象。 我们通过监听document的mousemove,就可以实时获得鼠标位置。 但是!!event中和鼠标相关的属性太多了 ...
- DataGridView自动保存列的宽度和位置
WinForm程序中表单的自动保存列的宽度和位置,是一种常见的功能,对于用户体验来说是非常好的.现记录一下实现过程: 1.新建一个类,命为为:DataGridViewColumnStyle. 这个类实 ...
- matlab中subplot 在平铺位置创建坐标区
来源:https://ww2.mathworks.cn/help/matlab/ref/subplot.html?searchHighlight=subplot&s_tid=doc_srcht ...
- 窗体位置设置StartPosition属性
有如下选项,分别含义如下: CenterParent 窗体在其父窗体中居中. CenterScreen 窗体在当前 ...
- 过程 sp_addextendedproperty, 对象无效。不允许有扩展属性,或对象不存在。
过程 sp_addextendedproperty, 对象无效.不允许有扩展属性,或对象不存在. 首先这个是创建数据表的SQL,有Power Designer创建模型,直接生成的创建SQL会出现的问题 ...
- C#遍历XmlDocument对象所有节点名称、类型、属性(Attribute)
C#遍历XmlDocument对象所有节点名称.类型.属性(Attribute) 源码下载 代码 static void Main(string[] args) { System.Xml.XmlDoc ...
- 消息 15135,级别 16,状态 8,过程 sp_addextendedproperty,对象无效。不允许有扩展属性,或对象不存在。
不知道网上为啥有那么多复制粘贴的文章,写点原创不好吗?堂而皇之的贴别人的文章有意思吗? 消息 15135,级别 16,状态 8,过程 sp_addextendedproperty,对象无效.不允许有扩 ...
- JQuery 获得绝对,相对位置的坐标方法
获取页面某一元素的绝对X,Y坐标,可以用offset()方法:(body属性设置margin :0;padding:0;) var X = $('#DivID').offset().top; var ...
随机推荐
- FFI
FFI概念 https://segmentfault.com/t/ffi/info FFI即Foreign Function Interface,外部函数调用接口,是一个语言提供的使用其他语言现有库( ...
- JavaSE回顾及巩固的自学之路(一)——————前言
长长的呼出一口气,终于到了末端了,JavaSE,Java入门的基础,历经一个多月,终于细细的学了一遍,大部分的时间都是熬夜到半夜两点钟.本来是一个月的课程,足足让我给学了将近两个月,为什么呢?第一,还 ...
- spring boot2 整合(一)Mybatis (特别完整!)
大概介绍下流程: 借助idea实现mybatis逆向工程 用xml配置实现整合 用cmd命令行实现mybatis逆向工程 用mapping.xml配置实现数据交互 用注解的方式实现数据交互 首先我的开 ...
- 第25月第3天 Mxshop项目记录01
1.项目 https://github.com/mtianyan/VueDjangoFrameWorkShop virtualenv命令 virtualenv . virtualenv -p /ana ...
- Hbase思维导图之逻辑结构
- Linq中的left join
left join var custs = from c in db.T_Customer join u in db.Sys_User on c.OwnerId equals u.Id into te ...
- icon图标制作网站推荐
推荐链接 easyicon
- Git——如何将本地项目提交至远程仓库
参考文章:http://blog.csdn.net/dadaxiongdebaobao/article/details/52081826 git 将一个本地文件目录提交到远程仓库的步骤 参考文章: ...
- 解释下面URL
解释下面URL各部分的含义 a.duke.csc.villanova.edu/jss/examles.html duke是计算机名,该计算机属于villanova.edu域的csc子域.edu是最高级 ...
- js-ES6学习笔记-Set和Map数据结构
1.ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. 2.Set 函数可以接受一个数组(或类似数组的对 ...