您的位置：首页 > 运维架构

对象的宽度、top位置，x坐标属性

2017-08-28 01:16 204 查看
DOM对象

DOM对象属性对应css说明读/写
width obj.clientWidth=201. 内联样式

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


2. 内部/外部CSS

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


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

(内容+padding)

不包括边框，边距或滚动条

只读
[b]obj.scrollWidth=20[/b]1. 内联样式

2. 内部/外部CSS

子元素整个盒子宽度以及当前元素左侧padding值

(内容+padding)

只读
obj.offsetWidth=201. 内联样式

2. 内部/外部CSS

返回元素的宽度，

包括边框和填充

(内容+padding[b]+border)[/b]

只读
obj.style.width="20px"<p style="width:20px"></p>在内联中定义才能读到值，否则为空

可写
obj.width这个属性并没有
height与width一样
top obj.offsetTop=20元素border外侧相对父元素border内侧垂直方向的偏移量只读
obj.scrollTop=20overflow:scroll时会出现滚动条

当前内容的顶部相对原始内容顶部的距离

可写
obj.style.top="20px"在内联中定义才能读到值，否则为空

可写
left与top一样




Window窗口

属性说明
widthwindow.innerWidth窗口的文档显示区的宽度
window.outerWidth窗口的外部宽度，包含工具条与滚动条
height与width相似
leftwindow.screenLeft返回相对于屏幕窗口的x坐标
top与left相似
event事件

纵坐标与横坐标类似，这里只列出横坐标

属性说明
event.screenX

鼠标指针相对于电脑屏幕的水平坐标
event.clientX鼠标指针向对于浏览器页面（或可见区域）的水平坐标

event.pageX鼠标指针相对于整个文档的水平坐标

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航