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. IPv6地址测试宏

  2. 二十八、Linux 进程与信号---前台进程组

    28.1 介绍 28.1.1 概念 自动接受终端信号的组称为前台进程组 在终端通过 ctrl + c 等动作产生的信号首先被前台进程组接受 在 shell 启动的若干个进程组默认是父进程所在的组为前台 ...

  3. luogu 2704 炮兵阵地 状压dp

    状压的基础题吧 第一次看感觉难上天,后来嘛就.. 套路:先根据自身状态筛出可行状态,再根据地图等其他限制条件筛选适合的状态加入答案 f i,j,k 分别代表 行数,本行状态,上行状态,再累加答案即可 ...

  4. Kali Linux之常见后门工具介绍

    1.Meterpreter 它是Metasploit框架中功能强大的后渗透模块.可以通过Meterpreter的客户端执行攻击脚本,远程调用目标主机上运行的Meterpreter服务端. 命令 作用 ...

  5. 解码base64加密的图片并打印到前台

    经过base64加密的图片对象是一串字符串,我们解码后可通过流将其打印出来: utils类: package com.aebiz.app.web.modules.controllers.open.ap ...

  6. MySql cmd下的学习笔记 —— 有关多表查询的操作(多表查询练习题及union操作)

    先建立一张 m 表 mysql> create table m ( -> mid int, -> hid int, -> gid int, ), -> matime da ...

  7. linux中的shell编程----基础

    1,运行shell脚本有两种办法一般有两种: 先给可执行权限,再进入文件所在的目录,输入:./name.sh: 运行解释器再执行脚本:/bin/sh name.sh,这种情况下,脚本中可以没有#!/b ...

  8. Linux 创建交换分区扩展虚拟内存

    当计算机的物理内存不足时,可以利用磁盘空间扩张为物理内存,实现的方式则是创建交换分区. 命令:mkswap + 分区设备 (格式化交换分区)     mkswapon +分区设备 (启用交换分区)   ...

  9. openstack Q版部署-----nova服务配置-控制节点(5)

    一.创建数据库(控制节点) 创建数据库以及用户: CREATE DATABASE nova_api; CREATE DATABASE nova; CREATE DATABASE nova_cell0; ...

  10. 一个是EF内联多表查询,一个是EF中写SQL文。

    public IList<MenuModel> GetAllMenu() { using (IMMEntities context = new IMMEntities()) { var m ...