DOM对象

  DOM对象属性 对应css 说明 读/写
width   obj.clientWidth=20

1. 内联样式

<p style="width:20px"></p>

2. 内部/外部CSS

<style>
p{
width: 20px;
border: 0;
padding: 0;
}
</style>
<p></p>

在页面上返回内容的可视宽度

(内容+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坐标属性的更多相关文章

  1. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

  2. javascript:与获取鼠标位置有关的属性

    javascript并没有mouse对象,获取鼠标坐标要靠强大的event对象。 我们通过监听document的mousemove,就可以实时获得鼠标位置。 但是!!event中和鼠标相关的属性太多了 ...

  3. DataGridView自动保存列的宽度和位置

    WinForm程序中表单的自动保存列的宽度和位置,是一种常见的功能,对于用户体验来说是非常好的.现记录一下实现过程: 1.新建一个类,命为为:DataGridViewColumnStyle. 这个类实 ...

  4. matlab中subplot 在平铺位置创建坐标区

    来源:https://ww2.mathworks.cn/help/matlab/ref/subplot.html?searchHighlight=subplot&s_tid=doc_srcht ...

  5. 窗体位置设置StartPosition属性

    有如下选项,分别含义如下: CenterParent                    窗体在其父窗体中居中.      CenterScreen                    窗体在当前 ...

  6. 过程 sp_addextendedproperty, 对象无效。不允许有扩展属性,或对象不存在。

    过程 sp_addextendedproperty, 对象无效.不允许有扩展属性,或对象不存在. 首先这个是创建数据表的SQL,有Power Designer创建模型,直接生成的创建SQL会出现的问题 ...

  7. C#遍历XmlDocument对象所有节点名称、类型、属性(Attribute)

    C#遍历XmlDocument对象所有节点名称.类型.属性(Attribute) 源码下载 代码 static void Main(string[] args) { System.Xml.XmlDoc ...

  8. 消息 15135,级别 16,状态 8,过程 sp_addextendedproperty,对象无效。不允许有扩展属性,或对象不存在。

    不知道网上为啥有那么多复制粘贴的文章,写点原创不好吗?堂而皇之的贴别人的文章有意思吗? 消息 15135,级别 16,状态 8,过程 sp_addextendedproperty,对象无效.不允许有扩 ...

  9. JQuery 获得绝对,相对位置的坐标方法

    获取页面某一元素的绝对X,Y坐标,可以用offset()方法:(body属性设置margin :0;padding:0;) var X = $('#DivID').offset().top; var ...

随机推荐

  1. talk命令帮助文档(ubuntu 18.04)

    TALK() BSD General Commands Manual TALK() NAME talk — talk to another user SYNOPSIS talk person [tty ...

  2. springboot06-swagger2 自动化api文档

    1.springboot 项目中添加swagger2依赖: <dependency> <groupId>org.springframework.boot</groupId ...

  3. PHP调用API接口实现天气查询功能

    天气预报查询接口API,在这里我使用的是国家气象局天气预报接口 使用较多的还有:新浪天气预报接口.百度天气预报接口.google天气接口.Yahoo天气接口等等. 1.查询方式 根据地名查询各城市天气 ...

  4. MGR架构~ 整体性能架构的调优

    一 简介:MGR集群架构的调优二 过程:本文将从各个角度来具体阐述下三 硬件    1 硬件选择相同配置的服务器,磁盘,内存,cpu性能越高越好四 网络    1 0丢包和最好万兆网卡五 MGR本身  ...

  5. WIN10 困扰多时的屏幕亮度 终于可以调节了-完美 -更新2018年2月28日

    总结:很多问题是自己认知不够造成的,  -- 问题解决在  修复经历二,可直接跳过去看  修复经历二. 首先看你屏幕亮度是集成还是独立显卡决定的(一般是集成),所以下面 修复经历一折腾独立显卡驱动没什 ...

  6. HashSet、TreeSet和LinkedHashSet分别基于HashMap、TreeMap和LinkedHashMap

    1.如果你需要一个访问快速的Set,你应该使用HashSet: 当你需要一个排序的Set,你应该使用TreeSet: 当你需要记录下插入时的顺序时,你应该使用LinedHashSet. 2.因为Tre ...

  7. FTP服务器的安装与配置

    查看是否安装ftp: rpm -qa |grep vsftpd 1.安装vsftp 1.1.安装vsftp,测试安装的vsftpd的版本是:vsftpd.x86_64 0:3.0.2-11.el7_2 ...

  8. php编程 之 php基础三

    1,php里的while循环 循环执行代码块指定的次数,或者当指定的条件为真时循环执行代码块. while实例: <html> <body> <?php $i=1; wh ...

  9. 20165237 2017-2018-2 《Java程序设计》第4周学习总结

    20165237 2017-2018-2 <Java程序设计>第4周学习总结 教材学习内容总结 1.子类只能有一个父类,父类可以有多个子类. 2.子类继承父类的成员变量和方法. 3.开闭原 ...

  10. Deep Learning(花书)教材笔记-Math and Machine Learning Basics(线性代数拾遗)

    I. Linear Algebra 1. 基础概念回顾 scalar: 标量 vector: 矢量,an array of numbers. matrix: 矩阵, 2-D array of numb ...