对象的宽度、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 ...
随机推荐
- S02-45 struts2 最新漏洞 学习记录
今天和朋友一起学习S02-45.按照官方解释:Content-Type:multipart/form-data 这个条件成立的时候,能够触发jakarta的上传漏洞.可能导致远程执行任意代码或者上传文 ...
- Swiper.js使用教程
官网地址:(http://www.swiper.com.cn/). 一.Swiper.js简介: Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架,使用 ...
- python 装饰器前之闭包和装饰器
装饰器: 一, 例如: # vim yue7.py def foo(): print ("fool-------------------") foo() 运行: [root@l ...
- 洛谷P1972 【[SDOI2009]HH的项链】
这道题想了很久,发题解是为了理解的更深刻一点...(管理放我过好嘛qwq) 步入正题:这道题应该是很多做法,我选择的是离线+树状数组. 首先输入数组.用fisrt数组先记录元素最开始出现的位置,对应的 ...
- 调用kaldi的模型进行解码
At the moment Kaldi is targeted more at people who are building ASR systems than those who just want ...
- java基础_0204:运算符
掌握Java中标识符的定义: 掌握Java中数据类型的划分以及基本数据类型的使用原则: 掌握Java运算符的使用: 掌握Java分支结构.循环结构.循环控制语法的使用: 掌握方法的定义结构以及方法重载 ...
- 用JavaMail通过QQ邮箱来发送邮件(第一篇博客,备忘)
1.先启用QQ邮箱里POP3/STMP服务:生成授权码 2.导入mail.jar包(不要用太古董的技术,你懂得) 3.注意要在代码里加上开启SSL加密的代码 4.直接上代码 import java.u ...
- 课程9:《hibernate框架开发2016版视频》视频目录
\第1天\视频\01_今天内容介绍.avi; \第1天\视频\02_web内容回顾.avi; \第1天\视频\03_hibernate框架概述.avi; \第1天\视频\04_什么是orm思想.avi ...
- Day17总结
1:登录注册案例(理解) 2:Set集合(理解) (1)Set集合的特点 无序,唯一 (2)HashSet集合(掌握) A:底层数据结构是哈希表(是一个元素为链表的数组) B:哈希表底层依赖两个方法: ...
- java.io.IOException: Server returned HTTP response code: 411 for URL
今日调用一post方式提交的http接口,此接口在测试环境ip调用时无问题,但在生产环境通过域名调用时一直报如下错误: java.io.IOException: Server returned HTT ...