对象的宽度、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 ...
随机推荐
- talk命令帮助文档(ubuntu 18.04)
TALK() BSD General Commands Manual TALK() NAME talk — talk to another user SYNOPSIS talk person [tty ...
- springboot06-swagger2 自动化api文档
1.springboot 项目中添加swagger2依赖: <dependency> <groupId>org.springframework.boot</groupId ...
- PHP调用API接口实现天气查询功能
天气预报查询接口API,在这里我使用的是国家气象局天气预报接口 使用较多的还有:新浪天气预报接口.百度天气预报接口.google天气接口.Yahoo天气接口等等. 1.查询方式 根据地名查询各城市天气 ...
- MGR架构~ 整体性能架构的调优
一 简介:MGR集群架构的调优二 过程:本文将从各个角度来具体阐述下三 硬件 1 硬件选择相同配置的服务器,磁盘,内存,cpu性能越高越好四 网络 1 0丢包和最好万兆网卡五 MGR本身 ...
- WIN10 困扰多时的屏幕亮度 终于可以调节了-完美 -更新2018年2月28日
总结:很多问题是自己认知不够造成的, -- 问题解决在 修复经历二,可直接跳过去看 修复经历二. 首先看你屏幕亮度是集成还是独立显卡决定的(一般是集成),所以下面 修复经历一折腾独立显卡驱动没什 ...
- HashSet、TreeSet和LinkedHashSet分别基于HashMap、TreeMap和LinkedHashMap
1.如果你需要一个访问快速的Set,你应该使用HashSet: 当你需要一个排序的Set,你应该使用TreeSet: 当你需要记录下插入时的顺序时,你应该使用LinedHashSet. 2.因为Tre ...
- FTP服务器的安装与配置
查看是否安装ftp: rpm -qa |grep vsftpd 1.安装vsftp 1.1.安装vsftp,测试安装的vsftpd的版本是:vsftpd.x86_64 0:3.0.2-11.el7_2 ...
- php编程 之 php基础三
1,php里的while循环 循环执行代码块指定的次数,或者当指定的条件为真时循环执行代码块. while实例: <html> <body> <?php $i=1; wh ...
- 20165237 2017-2018-2 《Java程序设计》第4周学习总结
20165237 2017-2018-2 <Java程序设计>第4周学习总结 教材学习内容总结 1.子类只能有一个父类,父类可以有多个子类. 2.子类继承父类的成员变量和方法. 3.开闭原 ...
- Deep Learning(花书)教材笔记-Math and Machine Learning Basics(线性代数拾遗)
I. Linear Algebra 1. 基础概念回顾 scalar: 标量 vector: 矢量,an array of numbers. matrix: 矩阵, 2-D array of numb ...