当前位置:首页 > 日记 > 正文

JS的宽度和高度简介

JS的宽度和高度简介
有时您使用js获取元素位置来定位项目中的元素。首先,之间的关系scrollwidth,clientwidth,和offsetwidth用图片说明。
js是对各种宽度和高度的简单介绍。

scrollheight:获取对象的滚动高度。

ScrollLeft:设置或获取远程对象的左边缘与窗口中当前可见的内容最左端之间

ScrollTop:设置或获取远程对象的顶部之间的顶部窗口中可见的内容

ScrollWidth:获取对象的滚动的宽度

offsetheight:得到家长的高度坐标的对象相对于布局或由家长offsetparent属性指定坐标

offsetleft:获取的对象相对于布局或母坐标的计算offsetparent属性指定的左边位置

offsettop:获取的对象相对于布局或父母的offsettop属性指定坐标计算的顶部位置

相关文件的event.clientx水平坐标

相关文件的event.clienty垂直坐标

event.offsetx相对容器的水平坐标

event.offsety相对容器的纵坐标

价值document.documentelement.scrolltop垂直方向滚动

事件的数量。ClientX + document.documentelement.scrolltop相对于文档的水平坐标和垂直方向

以上主要指IE,Firefox的区别如下:

IE6.0,ff1.06 +:

clientwidth =宽+填充

自己=高度+填充

offsetwidth =宽+填料+边界

offsetheight =高度+填料+边界

IE5.0 / 5.5:

clientwidth =宽边界

自己=高度边界

offsetwidth =宽度

offsetheight =高度

(有必要提一下:在CSS的边缘属性是独立的clientwidth,offsetwidth,自己,offsetheight)。

offsetwidth(宽+填料+边框)

如果obj是一个HTML控件。

obj.offsettop指的是对象的距离或上控制、位置的整数,单位像素。

obj.offsetleft obj指左侧或上控制位置的距离,整数像素单元。

obj.offsetwidth指的是目标控制本身的宽度的整数,单位像素,得到物体的可见内容的宽度,不包括滚动条,和边界是不包括。

obj.offsetheight指的是目标控制本身,高度的整数,单位像素。

offsetwidth和style.width之间的差异

一、offsettop返回一个数字,和style.top返回一个字符串,一个单位除了数量:PX。

二,offsettop只读,而style.top可以读写。

三、如果顶部风格不是HTML元素中指定,然后style.top返回空字符串。

相关文章

html元用法示例

html元用法示例

示例,电脑软件,html,html元可以做很多事情,视口可以控制页面大小和初始大小的大小,下面有一个例子,可以参考下一个。 使用示例 复制代码代码如下所示: TinyCss --我的CSS研究整理 {代码} Hint 1: Viewport,当你的页面有一个宽度,如1000px宽…

PS图象处理软件生产的一种绿色风格

PS图象处理软件生产的一种绿色风格

博客,图象,处理软件,风格,电脑软件,这个PS教程学习如何使用PS图象处理软件创造一个绿色的风格博客的常用图标,主要用于深化稀工具和图层样式。 先看看效果吧。 新建文档500x500像素,背景白色,建新层,用钢笔画下的路径,填写# 97d623。 使用加深…

html标签嵌套规则,适合新手朋友使用

html标签嵌套规则,适合新手朋友使用

标签,嵌套规则,适合,新手,朋友,所有网页都基于HTML标记。下面是HTML标记嵌套规则的详细介绍。初学者学习网页非常必要。 再学习HTML的新知识是HTML的一个新的认识。不要小看它。所有的网页都是基于它的!下面是HTML标签嵌套规则的详细总结,希…

Dreamweaver禁止自动线交换

Dreamweaver禁止自动线交换

自动线,电脑软件,Dreamweaver,我没想到Dreamweaver的菜单这么糟糕。我找了两天找一个选择。 我没想到Dreamweaver的菜单这么糟糕。我找了两天找一个选择。 视图>代码视图选项>自动行更改 上述操作需要处于代码源文件状态。…

PS海绵工具使用详细示例教程

PS海绵工具使用详细示例教程

教程,工具使用,示例,海绵,详细,PS海绵工具如何使用对于新手来说,它可能不是很熟悉海绵工具。所以今天我们给大家带来了PS海绵工具,使用详细的例子教程,不是朋友可以来学习的,希望对大家有帮助。 海绵工具可以调节图像的色彩饱和度,减去图像的颜…

一种ajax实时输入的自动搜索与匹配

一种ajax实时输入的自动搜索与匹配

方法,实时输入,自动搜索,电脑软件,ajax,本文介绍了ajax真实输入的自动搜索与匹配方法,供大家分享,供大家参考。具体分析如下: 第一种方法使用jQuery自动完成,和第二使用jQuery的Ajax,这实际上是由于两相同。 最简单的办法是直接使用jQuery自动…

Javascript动态创建一个表

Javascript动态创建一个表

动态,创建一个,电脑软件,Javascript,复制代码代码如下所示: 功能createtable(行线){ 行=行; 这行=行; VaR的身体= document.getelementbyid('body); 无功表= document.createelement(}}); / /创建一个表的标签元素 table.setattribute('border…

CDR绘制逼真的黑色算盘

CDR绘制逼真的黑色算盘

绘制,逼真,黑色,电脑软件,CDR,本教程是介绍给一个朋友,用CDR绘制一个真正的黑色算盘。本教程比较简单,非常适合初学者学习,希望对你有所帮助。 本教程是介绍给一个朋友,用CDR绘制一个真正的黑色算盘。教程的结果很好,而且制作方法相对简单。它…

画家手绘欧美金发女郎

画家手绘欧美金发女郎

手绘,画家,欧美,金发女郎,电脑软件,本教程是向你介绍手绘的欧洲和美国金发女郎。画家很难用。作者没有详细介绍绘画的过程,而是介绍了构图的概念,对学习者有一定的艺术作用是必要的。 本教程是介绍画家手绘欧美美女,教程是我翻译的,翻译不是很…

Dreamweaver解决网页制作中的空间

Dreamweaver解决网页制作中的空间

网页制作,空间,电脑软件,Dreamweaver,Dreamweaver是一个非常容易使用但功能强大的网页制作软件,然而,这是另一个让许多初学者感到困惑的问题,这就是空间,Dreamweaver中空间的使用远不如Word中的方便。这是因为HTML语言中不止一个空。 Dreamwea…

时尚海报的视觉效果,PS图象处理软件

时尚海报的视觉效果,PS图象处理软件

三种,图象,视觉效果,处理软件,清凉,本教程介绍朋友海报时尚的视觉效果与PS图象处理软件酷的气氛,辅导的效果真的很好,本教程介绍制作三种视觉海报推荐的方法在这里,爱和朋友一起学习。 本教程是为时尚海报的朋友PS图象处理软件让清凉的气息的…

正则表达式实现转换日期MM/DD/年为

正则表达式实现转换日期MM/DD/年为

转换,日期,正则表达式,格式,电脑软件,本文阐述了方法的转换日期MM / DD /年由正则表达式的实现格式为YYYY-MM-DD格式,分享给你参考。具体实现的方法如下: 复制代码代码如下所示: 正则表达式 返回列表 方法 请输入日期的MM / DD / yyyy格式: …