理解DHTML网页中元素的位置和大小关系

原创 2004年07月06日 15:50:00

MSDN上关于DOM(Dynamic HTML Object Model,文档对象模型)中元素的位置和大小关系图,我觉得很有用,就贴出来了:

英文原文:

Measuring Element Dimension and Location


The following section is designed to help Web authors understand how to access the dimension and location of elements on the page through the Dynamic HTML (DHTML) Object Model.

Understanding Properties That Measure Element Dimension and Location

The following diagram of a sample page shows the DHTML Object Model properties that are related to the dimension and location of elements. The sample page contains a DIV element that is relatively positioned on the page. Since the overflow attribute of the DIV has been set to scroll and it contains more content than can be displayed within its limited client area, scroll bars are displayed.

试着翻译一下,大家将就着看吧。

测量元素的大小和位置


下面的设计用来帮助web作者如何通过文档对象模型(DOM)来存取网页元素的大小和位置。

理解测量大小和位置的属性

下图显示了文档对象模型中有关元素的位置和大小关系的属性。页面包含一个相对定位的DIV标签。因为DIV的overflow属性已设置为scroll,当它显示的内容超出范围时,滚动条就会被显示出来。

?

引用的MSDN地址:mk:@MSITStore:D:/Program%20Files/Microsoft%20Visual%20Studio/MSDN/2000JUL/1033/inet.chm::/workshop/author/om/measuring.htm

xhtml,xml,html,和dhtml的关系和区别

XHTML产生的原因,一方面是为了和未来的XML大规模的应用接轨,一方面还要兼容目前的数以万计的用HTML编写的网页以及他们的设计者,开发者相兼容,于是便出现了这个东西。以HTML编写的网页中,标记使...
  • a519781181
  • a519781181
  • 2016年07月29日 10:47
  • 1746

3.1 Javascript:探索客户端-设置网页元素根据窗口比例调整位置与大小

设置图片位置与大小根据窗口大小自动调整 设置网页元素根据窗口比例调整位置与大小 function resizeDog() { //document.bo...
  • WeAreZero
  • WeAreZero
  • 2016年03月09日 10:21
  • 1135

Javascript getBoundingClientRect()来获取元素在页面的位置

语法EDIT rectObject = object.getBoundingClientRect(); 返回 返回值是一个DOMRect对象,这个对象是由该元素的 getClientRects...
  • ssisse
  • ssisse
  • 2016年08月25日 10:07
  • 770

html元素大小与位置讲解

这是一些极易混淆的概念。仔细分析,这些值都是用来对元素进行定位的,下面逐一介绍。本文只介绍width,left等值,与其对应的是 height,top。本文还只介绍在Firefox下的表现,我认为,先...
  • ssisse
  • ssisse
  • 2016年06月01日 21:55
  • 914

如何快速查看并定位网页元素代码

如何快速查看并定位网页元素代码 目的:可以迅速得找出一个网页中对应元素的html代码 1.首先我们打开一个网页,比如:百度首页 2.打开后我们会看到很多的文字链接以及按钮...
  • psh1234
  • psh1234
  • 2016年07月20日 10:24
  • 2205

获取网页元素的绝对位置

首先看这张图片上的几个位置,content,就是你所定位元素的位置, 每个元素都有offsetTop和offsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离...
  • lsfhack
  • lsfhack
  • 2017年04月08日 08:31
  • 359

js获取页面元素的位置

一、网页的大小和浏览器窗口的大小 首先,要明确两个基本概念。 一张网页的全部面积,就是它的大小。通常情况下,网页的大小由内容和CSS样式表决定。 浏览器窗口的大小,则是指在浏览器窗口中看到的那部...
  • Inuyasha1121
  • Inuyasha1121
  • 2015年10月15日 10:11
  • 2160

ACMclub - 1122 关系推断 (拓扑排序, 并查集)

题目连接 题目描述 给你一些已经确定的元素之间的关系,请你判断是否能从这些元素关系中推断出其他的元素关系。 将小于关系的两个点建立一个边。 拓扑排序: (1)从有向图中选择一个没有前驱(...
  • u011044487
  • u011044487
  • 2014年03月01日 11:48
  • 660

获取一个页面元素在页面上的坐标位置

//obj-要获取其页面坐标的元素function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) {  curleft ...
  • guoguo1980
  • guoguo1980
  • 2007年02月01日 16:16
  • 1165

Dhtml,html,xhtml的区别

Dhtml是在静态html的基础上综合和其它动态的技术而成的网页技术;DHTML=HTML+CSS+JAVASCRIPT+DOMHTML则是纯粹的静态网页技术XHTML则是在HTML中加入了xml的规...
  • cesium
  • cesium
  • 2007年03月28日 15:13
  • 5536
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:理解DHTML网页中元素的位置和大小关系
举报原因:
原因补充:

(最多只允许输入30个字)