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. php实现无限级分类查询(递归、非递归)

    递归函数实现方式 上面提到,递归函数的也是借助于栈的机制实现的,但是底层对于栈的处理对于程序员来说都是透明的,程序员只需要关心应用的实现逻辑.所以说使用递归处理上述问题理解起来比较容易,代码也比较简洁 ...

  2. Docker 空间大小设置 - 十

    一.容器启动 默认存储大小: 1.一种在启动项 docker.service 中配置. 2.在启动项配置调用的 docker-storage 配置文件中配置: 二.Docker 容器默认启动文件: / ...

  3. Restful API学习Day4 - DRF版本控制和认证

    参考文档: Django REST framework基础:版本控制 Django REST framework基础:认证.权限.限制 为什么要有版本? 某些客户端 使用低版本只维护不开发新功能 v1 ...

  4. linux随机生成密码

    1.mkpassword工具 # 使用最多的密码生成工具 yum -y install expect #需要安装expect工具 mkpasswd -l -d -c -C -s #直接在命令行进行随机 ...

  5. 「PKUWC 2018」Minimax

    传送门:Here 一道线段树合并好题 如果要维护点$ x$的信息,相当于合并$ x$的两棵子树 对于这题显然有:任何叶子节点的权值都可能出现在其祖先上 因而我们只需要在线段树合并的时候维护概率即可 我 ...

  6. C#获取客户端IP地址

    客户端ip:Request.ServerVariables.Get("Remote_Addr").ToString();客户端主机名:Request.ServerVariables ...

  7. MyBatis学习七:spring和MyBatis整合

    <\mybatis\day02\16mybatis和spring整合-sqlSessionFactory配置.avi;> MyBatis学习七:spring和MyBatis整合.逆向工程 ...

  8. python - list 和 tuple

  9. MySql cmd下的学习笔记 —— 有关表的操作(对表中数据的增,删,改,查)

    (知识回顾) 连接数据库 mysql -uroot -p111 先建立一个新库 create database test1; use test1; 由于今天的主要内容是表的操作,建立表的详细过程不是本 ...

  10. 使用ENCKEYS方法加密数据

    要使用这种数据加密方法,您需要配置Oracle GoldenGate以生成加密密钥并将密钥存储在本地ENCKEYS文件中.此方法使用的永久密钥只能通过根据使用加密密钥填充ENCKEYS文件中的说明重新 ...